html笔记_牛客博客

第二章从零开始构建HTML页面

<hr /> 单标记定义一条水平线
<meta charset="utf-8"/> 编码格式
<p algin="center"> 段落文本 </p> 设置文字对齐方式还可以设置left、right
<link type="text/css" rel="stylesheet" href="css.css"> 引用外部CSS样式表

常用文本格式化标记：

<em></em>斜体
<strong></strong> 加粗
<ins></ins> 下划线
<del></del> 删除线

常用特殊字符标记：

 空格
©版权符号
< < 小于号
> > 大于号
® ® 注册商标
° ° 摄氏度
± ± 正负号
¥ ¥ 人民币
× × 乘号
÷ ÷ 除号
² 平方 ³ 三次方

插入图片：

<img src="图像URL"> 插入图片关于图片路径的写法戳一戳
<img src="logo.jpg" alt="网站logo"> alt属性图片替换文本，无法显示图片时会显示alt内容
<img src="logo.jpg" alt="网站logo" title="logo"> title属性用于设置鼠标悬停时图像的提示文字

图像标签其他属性：

width height 设置宽高（像素）
border 设置边框宽度（数字）
vspace 设置图像顶部和底部的空白（像素）
hspace 设置图像左侧和右侧的空白（像素）
align=left/right 左对齐/右对齐
align=top 将图像顶端和文本第一行文字对齐，其他文字居于图像下方
align=middle 将图像的水平中线和文本第一行文字对齐，其他文字居于图像下方
align=bottom 将图像的底部和文本第一行文字对齐，其他文字居于图像下方

第三章使用CSS技术美化网页

设置字体：

p{
	font-size:15px;  /*字体大小*/
	font-family:"微软雅黑";  /*字体样式*/
	color:red;  /*字体颜色*/
	text-algin:center;  /*居中对齐*/
	font-wight:bold; /*加粗  bolder/lighter*/
	font-style:italic;  /*斜体   还可以选 normal/oblique*/
	line-height:30px;  /*行高  可以用于垂直居中*/
	text-transform:capitalize;  /*首字母大写  用于设置文本转换*/
	text-decotation:underline;  /*设置下划线/上划线/删除线 */
	text-indent:2em;  /*首行缩进*/
}

CSS选择器

标签指定式选择器（交集选择器）：由两个选择器构成，其中一个为标记选择器，另一个是class选择器或者id选择器，两个选择器之间不能有空格。如p#one{ } 中定义的样式只能应用于<p id="one">1111</p> 同理，p.ss{ }应用于<p class="ss">11</p>
后代选择器：div p em{} 应用于<div> <p> <em> 123</em> </p> </div>
并集选择器：h3,h2,p{color:red;}

css文档：
#head{color:red!important;}最高优先级！

第四章盒子模型

margin 外边距
padding 内边距
margin:10px 10px 10px 10px ;上、左、下、右
border 边框 solid实线 dashed 虚线
background:#ccc;背景颜***r> background-image:url(images/jianbian.jpg);背景图片
background-repeat: no-repeat;不平埔（左上角显示一次）
background:url(images/book.png) no-repeat left center;综合设置背景图片不平铺左浮动居中
float:left;左浮动
display:inline;将此元素显示为行内元素
display:block;将此元素显示为块元素
display:inline-block;将此元素显示为行内块元素，可以设置宽高和对齐，不会独占一行
display:none;该元素将被隐藏

第五章列表与超链接

无序列表

<ul> <li></li> </ul>
type:disc/circle/square;type属性值

有序列表

<ol> <li></li> </ol>
type :1;还可以设置为a英文字母/i罗马数字
start规定项目符号起始值
value规定项目符号的数字

定义列表

<dl> <dt> <dd></dd> </dt> </dl>

list-style:none;清除默认样式

小案例：新闻栏目

超链接

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
a:link{ }未访问的状态
a:visited{ }访问过后的状态
a:hover{ }鼠标悬停时的状态
a:active{ }鼠标单击不动时超链接的状态
cursor:pointer;鼠标变小手 default变指针

html表单

<input />表单输入控件 type=text type=button type=password
<textarea> </textarea> 多行文本框
<select></select> 下拉列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<!--表单域-->
<form action="" method="post"> <!--提交地址 提交方式-->
    账号：
    <input type="text" name="zh"> <!--文本框-->
    <br/>
    密码：
    <input type="password" name="mm"> <!--密码框-->
    <br/>
    <input type="submit" value="提交"> <!--提交按钮-->
    <br/>
    <!--单选框-->
    性别：
    <input type="radio" name="sex" checked="checked"/>男
    <input type="radio" name="sex"/>女
    <br/>
    <!--多选框-->
    兴趣：
    <input type="checkbox"/>唱歌
    <input type="checkbox"/>跳舞
    <input type="checkbox"/>打球
    <br/>
    <!--多行文本框，定义行列 rows行 cols列-->
    <textarea cols="40" rows="20">

    </textarea>
    <br/>

    <select> <!--下拉列表-->
        <option>1</option>
        <option>2</option>
        <option selected="selected">3</option> <!--默认选中项-->
        <option>4</option>
    </select>
</form>
</body>
</html>

第七章浮动与定位

float:left right none浮动的属性
1、选择器:{ clear:属性值; }清除浮动影响 clear:left;清除左侧浮动影响 clear:both;清除两侧浮动影响
2、overflow:hidden;清除子元素浮动影响，还有其他属性值，auto需要时显示滚动条
选择器:{position:属性值;}定义元素的定位方式
1、static自动定位（默认模式）
2、relative相对定位，相对于其原文档流的位置定位
3、absolute绝对定位，相对于其上一个已经定位的父元素进行定位
4、fixed固定定位，相对于浏览器窗口定位
一般，我们父元素用相对定位relative，子元素用绝对定位absolute。
设置完了定位模式之后，就是设置定位。top``left``bottom``right
z-index:100;层叠等级属性，值越大，显示越靠前！（仅对定位元素有效）

第八章 JavaScript编程基础

鼠标悬停时显示下拉列表

banner图/轮播图

html笔记

第二章 从零开始构建HTML页面