HTML 语法构成
1. 标签
单标记
<meta charset="UTF-8">
双标记： 开始 关闭
<head> </head>
<body> </body>
2. 属性
标签名称后 空格隔开
<meta name="viewport" content="width=device-width, initial-scale=1.0">
属性值和属性用 = 赋值，属性值用 ' ' ，属性间用空格隔开
常用标签
1. 文本标题标签
每个标题都有默认字体大小，文本都会加粗
<h1></h1> <!-- 唯一 放LOGO -->
2. 字体倾斜
<i>倾斜内容</i>
<em>倾斜内容</em>
3. 文本加粗
<b>加粗内容</b>
<strong>加粗内容</strong>
4. 下划线
<u>下划线</u>
5. 强制换行
<br>
6. 水平线
<hr>
7. 上下标
<sub></sub>
<sup></sup>
8. 文本
<p>
</p>
9. 字符
<span>某一个字符，小段文本</span>
后期用 css 可以单独为<span>单独设置样式
10. 转义字符
不换行空格, 浏览器在解析一段空格时只会显示一个空格
> >右尖括号
< <左尖括号
© 备案中图标版权 ©
11. 布局 div
div 专门给网页划分布局的：一个div就是一个板块一个盒子
HTML列表
1. 无序列表 unorderd list
- Tips： ctrl + D 同时编辑
<ul>
<li>sasdlkas</li>
<li>asjd</li>
<li>asjd</li>
</ul>
后期只要结构不要前面的符号
应用： 新闻列表、主导航
2. 有序列表 orderd list
- Tips： ctrl + D 同时编辑W
<ol>
<li>sasdlkas</li>
<li>asjd</li>
<li>asjd</li>
</ol>
应用： 比较少，图片切换
- 拓展：
- 自定义符号类型
type = ''- A - 字母 ；
- i - 罗马字符 ；
- 自定义起始点
start = ' '从第几个开始，只能用数字
- 自定义符号类型
<ol type="i" start="2">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
3. 自定义列表
<dl>
<dt>一个名词</dt>
<dd>对名词的解释</dd>
</dl>>
应用： 上标图片下标文字， 一个dl对应一组图片文字
超链接
页面跳转
<a href="http://taobao.com" target="_blank" title="淘宝">跳转淘宝</a>
-
样式：默认蓝色，点后紫色
-
属性：
-
href目标链接 -
target-
_self当前页面打开 默认 -
_blank新窗口
-
-
title提示信息
-
-
应用
-
空链接
<a href="#">跳到xxx</a> -
模拟按钮
<a href="javascript:void(0)">按钮</a> -
禁止传递权重 ，屏蔽超链接跟随（搜索引擎权重计算）
<a href="#" rel="nofollow">跳到xxx</a>
-
图片
-
导入的图片结构 html
-
背景图 css
<img src="./images/1.png" alt="郎朗" width="300" height="200" border="20">
-
属性
-
src = 'url' -
alt = ' 标签 实例 带有指定替代文本的图像'必须存在！！！！
加载成功时不显示
优化排名，方便搜索引擎爬取图片（搜索引擎无法识别图片文本）
alt属性值得长度必须少于100个英文字符
-
title = '文本提示'非必须 -
width = ''可以加单位，不加也行 -
height = '' -
border = ''
-
路径
相对路径
- 同级
./xxxxx - 父找子
./folder1/folder2/xxx - 子找父
../xxx多一个.就上跳一级
绝对路径
较少使用
表格 - 显示数据
<table width='500' hight='1000' border="1" bordercolor='green' bgcolor='black' align="center">
<tr align="center" valign="bottom">
<td rowspan="2">列！</td>
<td colspan="2">列！</td>
</tr>
<tr>
<td>列！</td>
<td>列！</td>
</tr>
</table>
属性
-
width=""宽 -
height=""高 -
border=""边框 -
bordercolor=""边框的颜色 -
bgcolor=""背景色
后期用 css 完成
重要的属性！
-
cellspacing=""表格边框之间的间距 一般为0 -
cellpadding=""单元格内容距离边框的间距 一般为0 -
align=""水平对齐方式 属性值：center left right 用在内部！！！！ -
valign=""垂直对齐 属性值：top bottom middle -
colspan="合并的单元格数量"合并列 只要不跨行，就是和并列 -
rowspan="合并的单元格数量"合并行 跨行的就是合并行注：无论合并行还是合并列，操作的都是
<td>和谁合并就删掉谁！
例
<table cellspacing="0" cellpadding="0" width="500" height="300" border="1" bordercolor="red">
<tr>
<td align="center">会员姓名</td>
<td width="200"></td>
<td align="center">出生日期</td>
<td width="150"></td>
</tr>
<tr>
<td align="center">身份证号</td>
<td colspan="3"></td>
</tr>
<tr>
<td align="center">通信地址</td>
<td colspan="3"></td>
</tr>
<tr>
<td align="center">电话</td>
<td colspan="3"></td>
</tr>
<tr>
<td align="center">卡号</td>
<td colspan="3"></td>
</tr>
</table>
表单 - 收集信息
<form name="" action="" method="">
<input type="text">
<hr>
<input type="password">
<hr>
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="按钮">
</form>
<form>属性
name="表单的名称"action="接口地址（数据提交的地址路径）"method="post/get"控制数据提高方式
表单控件
<form name="表单名称" action="数据提交的接口路径" method="数据提交方式">
<input type="text" value="用户名" maxlength="10">
<hr>
<input type="password">
<hr>
<input type="submit" value="注册">
<input type="reset">
<input type="button" value="按钮">
</form>
-
type = '控件类型'- text
- password
- submit / reset / button
-
name：属性标识表单域的名称； -
Value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。 -
maxlength：控制最多输入的字符数， -
Size：控制框的宽度（以字符为单位）
表格 + 表单
<table width="600" height="250" cellspacing="0" cellpadding='0' border="1" bordercolor="red" >
<form action="">
<tr align="center">
<td colspan="2">登陆窗口</td>
</tr>
<tr align="center">
<td align="right">用户名</td>
<td><input type="text"></td>
</tr>
<tr align="center">
<td align="right">密码</td>
<td><input type="password"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登陆">
<input type="reset" value="重置">
</td>
</tr>
</form>
网友评论