文章目录
HTML简介
HTML,即Hyper Text Markup Language,超文本标记语言。
HTML文件结构:
第一个html文件
<html>
<head>
<title>first.html</title>
</head>
<body>
这是第一个页面
</body>
</html>
长成这样:
常用标签
字体标签
<font>...</font>
作用:规定文本的字体、字体尺寸(1-7,1最小,7最大)、字体颜色
如:
<html>
<head>
<title>first.html</title>
</head>
<body>
<font size="7" face="隶书" color="red" >
这是第一个页面
</font>
</body>
</html>
颜色表示:RGB、十六进制、标签。
具体后面会细讲。
段落标签p
<p>...</p>
作用:定义一个段落
如:
<html>
<head>
<title>first.html</title>
</head>
<body>
<p>Java是一门面向对象的编程语言</p>
<p>Java是一门面向对象的编程语言</p>
</body>
</html>
注意:
- 段落内依据所在容器的宽度自动换行
- 浏览器会自动地在段落的前后添加空行
<p>
和<br>
的区别:<br>
换行不换段。
注释标签<!--....-->
<!--....-->
作用:注释。
标题标签h
<h?>...</h?>
?处是数字,1-6,1最大,6最小。
作用:定义标题头的六个不同文字大小,依次显示重要性的递减。
注意:尽量靠近在html中的<body>
标签,越近越好,以便让搜索引擎最快的领略主题。
如:
<!--前后重复部分就删去了-->
<body>
<h1> h1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</body>
一般:
- h1:大标题
- h2:副标题
- h3:栏目标题
图片标签img
<img src="***"/>
作用:来浏览器显示图片。
常用属性:src
,alt
,height
,width
如:
<body>
logo:<img src="1.jpg" alt="not find" />
</body>
若图片不存在,则显示not find
若存在则显示图片:
还可以设置宽度和高度(不常用):
<body>
logo:<img src="img/1.jpg" alt="not find" width="100px" height="100px" />
</body>
不过一般在css里面写高度和宽度。
超级链接标签a
a标签:<a>...<a>
作用:使用超级链接与网络上的另一个文件相连
注意:超链接可以是一个字,一个词,或一组词,也可以是图像:我们可以点击这些内容来跳转到新的文档或当前文档的某个部分。
如:
<body>
<a href="welcome.html">打开新页面</a>
</body>
<body>
<h1>我的新页面</h1>
<a href="first.html"> 单击此处返回首页</a>
</body>
注意:打开一个网址需要加上http://
A标签的target属性:
标签 | 格式 |
---|---|
_blank | 在新打开、未命名的窗口打开链接 |
_parent | 在父窗口打开链接 |
_self | 在当前窗口打开 |
_top | _top目标将会清除所有被包含的frame框架 |
如:
<body>
<a href="welcome.html" target="_blank">打开新页面</a>
</body>
点击后会产生新窗口。
锚点标签
<a name="ziti">---</a>
作用:同一个文档中创建指向该锚(位置)的链接
注意:锚点必须先定义,再使用
用法:
<a href="#num-1">
跳转到当前页面的num-1锚点<a href="first#num-1">
跳转到first这个页面的num-1锚点
如:
<body>
<p><a href="#num-1">锚点1</p>
<p><a href="#num-2">锚点2</p>
<p><a href="#num-3">锚点3</p>
<!--定义一个锚点-->
<a name="num-1">
<p>num-1一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
</a>
<a name="num-2">
<p>num-2一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
</a>
<a name="num-3">
<p>num-3一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
<p>一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话一大段废话
</p>
</a>
</body>
效果就是点哪里就跳转到哪里。
再另一个html文件上写:
<body>
<h1>我的新页面</h1>
<p><a href="first.html#num-3"> first页面的锚点3</a></p>
</body>
则会跳转到first这个页面的num-3的锚点。
列表
无序列表
<ul><li>...</li></ul>
此列项目使用粗体圆点进行标记:
- 就
- 是
- 这
- 个
注意:列表内部可以使用段落、换行符、图片、链接以及其他列表等。
如:
<body>
<ul>
<!--li*3 Tab 快速生成-->
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
显示:
- a
- b
- c
有序列表
<ol><li>...</li></ol>
- 就
- 是
- 这
- 个
如:
<body>
<ol>
<!--li*3 Tab 快速生成-->
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
显示:
- a
- b
- c
阶段小结
标签 | 格式 |
---|---|
列表 | ul 、ol 、li |
超链接 | <a href="***"> ...</a> |
锚点 | a name="maodian1"...</a> , <a href="#duanluo">段落标签</a> |
表格
相关标签
table
表格的开始和结束caption
表格的大标题tr
行的添加th
列/单元格(意思一样)的标题td
列/单元格border
边框width
宽度
如:
<body>
<!--这里没有px也可以 因为是不严格的语法检查-->
<table border="1px" width="600px">
<caption>用户信息表</caption>
<tr>
<th>姓名</th>
<th>密码</th>
<th>邮箱</th>
</tr>
<tr>
<td>小明</td>
<td>123456</td>
<td>123456@youxiang.com</td>
</tr>
<tr>
<td>小红</td>
<td>111111</td>
<td>小红@youxiang.com</td>
</tr>
</table>
</body>
显示:
合并行列
colspan
列的合并rowspan
行的合并
合并原则:向上、向左合并。
- 若是行的合并,则在要合并的第一行写代码
- 列:选最左的一列
语法:colspan="?"
?是数字,合并几个数字就是几(包括自己)
如:
<body>
<table border="1" width="600">
<caption>商品库存表</caption>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
<tr>
<td rowspan="2">家电类</td>
<td>冰箱</td>
<td>台</td>
<td>123</td>
</tr>
<tr>
<td>电视</td>
<td>台</td>
<td>456</td>
</tr>
<tr>
<td>辅料</td>
<td>插线板</td>
<td>个</td>
<td>111</td>
</tr>
<tr>
<td colspan="4">备注:</td>
</tr>
</table>
</body>
分组设置表格格式的标签
caption
thead
tbody
tfood
以上四个标签描述的范围:
如:
<body>
<table border="1" width="600">
<caption>商品库存表</caption>
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">家电类</td>
<td>冰箱</td>
<td>台</td>
<td>123</td>
</tr>
<tr>
<td>电视</td>
<td>台</td>
<td>456</td>
</tr>
<tr>
<td>辅料</td>
<td>插线板</td>
<td>个</td>
<td>111</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">备注:</td>
</tr>
</tfoot>
</table>
</body>
这是用标签描述表格的范围:哪里是标题、哪里是页眉…等等,不会对显示有什么改变(caption会有改变)。相当于自己定义一个范围,之后用它。
相关属性
注意:Firefox、Chome、Safari仅支持colgroup元素的span和width。
属性 | 值 | 描述 |
---|---|---|
align | right left center justify char | 定义在列组合中内容的水平对齐方式 |
char | character | 规定根据哪个字符来对齐列组中的内容 |
charoff | number | 规定第一个对齐的字符偏移量 |
span | number | 规定列组应该横跨的列数 |
valign | top middle bottom baseline | 定义在列组合中内容的垂直对齐方式 |
width | pixels % | 规定列组合的宽度 |
如:按照数字的小数点对齐。
char
表示自定义。属性char和charoff也是表示自定义——不过现在很多浏览器都不支持了。
相关代码改成:
<td align="char" char=".">123.0</td>
...
<td align="char" char=".">456.00</td>
...
<td align="char" char=".">111.00000</td>
其他标签
属性名称 | 属性值 | 作用 |
---|---|---|
border | 1 | 设置边框 |
width | npx,n%(相对于浏览器的宽度) | 表格宽度 |
bgcolor | 颜色值 | 表格背景 |
align | left、center、right | 表格在文档中的对齐方式 |
cellpadding | npx | 内容和边框之间的间距 |
cellspacing | npx | 单元格之间的间距 |
关于显示边框:
属性名称 | 属性值 | 作用 |
---|---|---|
frame | void | 不显示外边框 |
frame | border | 四周都显示 |
frame | above | 显示上部的外边框 |
frame | below | 显示下部的外边框 |
frame | hsides | 显示上下的外边框 |
frame | lhs | 显示左部的外边框 |
frame | rhs | 显示右部的外边框 |
frame | vsides | 显示左右的外边框 |
关于单元格间距:
属性名称 | 属性值 | 作用 |
---|---|---|
rules | none | 内边框将不被显示 |
rules | rows | 内边框将在行之间显示 |
rules | cols | 内边框在列之间显示 |
rules | all | 内边框将被显示 |
align | left、center、right | 三种水平对齐方式 |
valign | bottom、middle、top | 三种垂直对齐方式 |
表单
表单主要控件和实例
表单:用于收集用户信息,进行人机交互操作。
包含元素:文本框、单选按钮、列表框、图片框、复选框等。这些元素统称“控件”
示例:
控件的常用属性:
代码实现:
<!--html:5 Tab 快捷输入-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="" method="">
<!--放进 label里 这样之后就可以操作文字-->
<label>请输入姓名:</label>
<input type="text" name="" id=""><br>
<label>请输入密码:</label>
<input type="password" name="" id=""><br>
<label>请重复输入密码:</label>
<input type="password" name="" id=""><br>
<label>性别:</label>
<!--name是一样的,则是一组——一组里只有一个能选中-->
<input type="radio" name="xb" id="" value="1"><label>男</label>
<input type="radio" name="xb" id="" value="0"><label>女</label><br>
<!--value里的值是传到后台的值 最好是数字。字符会有编码的问题-->
<label>兴趣爱好:</label>
<input type="checkbox" name="" id="" value="1"><label>游泳</label>
<input type="checkbox" name="" id="" value="2"><label>看书</label>
<input type="checkbox" name="" id="" value="3"><label>爬山</label>
<input type="checkbox" name="" id="" value="4"><label>思考</label><br>
<label>生日:</label>
<select>
<option value="1995">1995</option>
<option value="1996">1996</option>
<!--默认选中1997-->
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
</select>
<label>年</label>
<select>
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
<label>月</label>
<select>
<option value="01" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
<label>日</label><br>
<!--选择头像-->
<label>头像</label><img src="img/1.jpg">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<!--submit 进入后台继续处理-->
</form>
</body>
</html>
显示:
表单其他控件
主要包括:
- 普通列表框(非下拉列表框)
- 隐藏域
- 上传控件
- 多行文本框
ps:
多行文本框一般用于论坛回帖、发帖。
单行文本框一般用于用户数据的收集。
普通列表框
<select size="10"> <!--有几个选项size就是几-->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
<option value="3">3</option>
</select>
显示:
隐藏域
000<input type="hidden">00000
蓝色选中的这一块就是隐藏域——它不显示。
主要的作用是:信息传递。
上传
<input type="file"><input type="button" value="上传">
多行文本框
<body>
<textarea rows="5" cols="30">请输入:</textarea>
</body>