- A+
1.页面结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
编码:charset=“gbk” ;gbk2312,utf-8
2.常见标签
2.1 meta标签
关键字
<meta name="keywords" content="HTML基础" />
作者
<meta name="author" content="lxl" />
描述
<meta name="distribution" content="这是一个基础网站" />
<script> 导入js文件
<!-- 文本内容 --> 注释
<p> 段落内容 </p> 段落
2.2 标题标签
由大到小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<br> 换行标签
<p>进行<br>换行</p>
<hr> 换行线标签
<p>进行<hr>换行</p>
2.3 文本属性
<strong> 加粗
<b>加粗
<p>进行<strong>加粗</strong></p>
<p>进行<b>加粗</b></p>
<i>斜体
<u>下划线
<sup>下标
<sub>上标
<del>删除线
<font>规定字体属性
size 字体大小
color 字体颜色
<font size="15px" color="blue">字体属性</font>
<pre>代码样式原样输出
<p> <pre>www< /pre> </p>
2.4 form标签
form标签用于为用户输入建立HTML表单
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等
action属性定义在提交表单时执行的动作,通常会被提交到web服务器上的网页
可以指定某个服务器脚本来处理被提交表单:
<form action="action_page.php"></form>
如果省略action属性,则action会被设置为当前页面:
<form action=""></form>
method提交的方法有get,post
enctype属性的值:
application/x-www-form-urlencoded(默认选项)
multipart/form-data
text/plain
<form method="post" enctype="application/x-www-form-urlencoded"></form>
<input>元素是最重要的表单元素
注意:表单本身是不可见的
对于type属性:
text:定义常规文本输入的单行输入字段
<input type="text" name=""/>
password:密码输入框
file:文件上传(此时enctype的值应为第二个选项)
<form method="post" enctype="multipart/form-data"> <input type="file" value="file"/> <input type="submit" /> </form>
hidden:隐藏域
button:按钮
reset:重置按钮
submit:定义提交按钮(提交表单)
radio:定义单选按钮输入(选择其中之一)
checkbox:定义多选按钮(选择其中多个)
<input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female
name="sex"的作用是性别只能单选
name:同样表示文本输入框名称
(如果要正确的被提交,每个输入字段必须设置一个name属性)
size:输入框的大小
maxlength:输入框中允许输入字符的最大数
value:输入框中的默认值
readonly:表示该输入框只能显示,不能修改
<input type="text" name="username" size=25 maxlength="5" value="lxl" readonly="" />
2.5 a标签
a标签用于控制界面与页面之间的跳转
target的默认值为_self
_self:用于在当前选项卡中跳转,不新建页面
<a href="http://baidu.com" target="_self">百度</a>
_blank:用于在新选项卡中跳转,要新建页面
<a href="http://baidu.com" target="_blank">百度</a>
_parent:在父框架集中打开被链接文档
_top:在整个窗口中打开被链接文档
2.6 锚文本
<p name="top">顶部内容</p> 锚点 <a href="#top">跳转顶部</a> 跳转锚点
2.7 img标签
img标签用于向网页中嵌入一幅图像
<img src="img/txt.jpg" alt="替代文本"/>
src:规定显示图像的url
alt:规定图像的替代文本
width:规定图片的高度
height:规定图片的宽度
2.8 table标签
table标签用于定义HTML表格
<table border="5" cellpadding="10" cellspacing="10"> <caption>学生表</caption> <th>分类</th> <tr><td>学号</td><td>姓名</td><td>年龄</td></tr> <tr><td>01</td><td>lxl</td><td>20</td></tr> <tr><td>02</td><td>zhj</td><td>35</td></tr> <tr><td>03</td><td>ljk</td><td>40</td></tr> </table>
border:定义表格边框
cellpadding:定义单元边沿与内容的空白
cellspacing:定义单元格的空白
colspan:行合并
rowspan:列合并
<caption>定义表格标题
<th>定义表格表头
<tr>定义表格的行
<td>定义表格单元
2.9 列表标签
<ul>标签用于定义无序列表
<ul type="circle"> <li>文本内容</li> <li>文本内容</li> </ul>
项目符号:circle(默认),square,disc
注意:type=“none”时无项目符号
<ol>标签用于定义有序列表
<ol type="1"> <li>文本内容</li> <li>文本内容</li> </ol>
标记类型:1(默认),A,a,I,i
2.10 框架使用