目录
常用标签
标题标签
h1-h6：越来越小
<body>
<h1>你好世界</h1>
<h2>你好世界</h2>
<h3>你好世界</h3>
<h4>你好世界</h4>
<h5>你好世界</h5>
<h6>你好世界</h6>
</body>
运行结果：
段落标签：<p></p>
p 标签之间存在一个空隙
在css中我们一般使用px作为单位,
<p>在桌面浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素，</p>
<p>这可能会造成我们的一个错觉，</p>
那就是css中的像素就是设备的物理像素。运行结果：
空格标签 : 
换行标签：<br>
在css中我们一般使用px作为单位,
<br>在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，
<br>这可能会造成我们的一个错觉，
<br>那就是css中的像素就是设备的物理像素。运行结果：
格式化标签
- 加粗：strong标签和b标签
- 倾斜：em标签和i标签
- 删除线：del标签和s标签
- 下划线：ins标签和u标签
<b>你好世界</b>
<!-- 加粗 -->
<i>你好世界</i>
<!-- 倾斜 -->
<s>你好世界</s>
<!-- 删除线 -->
<u>你好世界</u>
<!-- 下划线 -->
图片标签<img src="rose.jpg">
图片rose和html放在同一目录
如果图片在上级目录，则<img src="../rose.jpg">
- alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
- title: 提示文本. 鼠标放到图片上, 就会有提示.
- width/height: 控制宽度高度.
- border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="rose.png" alt="图片" title="晴天" width="500px" height="500px">
超链接标签<a></a>
href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
锚点链接: 可以快速定位到页面中的某个位置.
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情
第一集剧情
...</p>
<p id="two">
第二集剧情
第二集剧情
...</p>
<p id="three">
第三集剧情
第三集剧情
...</p>
//点击第一集超链接会跳转到id为one处
表格标签
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
表格标签的一些属性（要放入table中）：
- align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
- border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
- cellpadding: 内容距离边框的距离, 默认 1 像素
- cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸.
<table>
<tr>
<th>
信息统计表
</th>
</tr>
<tr>
<td>姓名</td>
<td>班级</td>
<td>年龄</td>
</tr>
<tr>
<td>dyy</td>
<td>高三(1)班</td>
<td>18</td>
</tr>
</table>执行结果：
合并单元格
- 跨行合并: rowspan="n"
- 跨列合并: colspan="n"
要合并的格子个数写在合并后存在元素的后面
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td colspan="2">男</td>
</tr>
<tr>
<td>女</td>
<td>11</td>
</tr>运行结果：
列表标签
- 无序标签<ul> <li> </li> </ul>
- 有序标签<ol> <li> </li> </ol>
- 自定义标签<dl> <dt> <dd> </dd> </dt></dl>
无序标签
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
有序标签
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
自定义列表
<dl>
<dt>课程表</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>执行结果：
表单标签
form标签:
描述了要把数据按照什么方式, 提交到哪个页面中
<form action="demo1.html">
... [form 的内容]
</form>input标签:
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
- value: input 中的默认值.
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度.
文本框
<input type="text">密码框
<input type="password"><p></p>单选框（相同的name，则男和女只能选一个，且默认为女）
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女<p></p>复选框
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox">
睡觉 <input type="checkbox">打游戏<p></p>普通按钮
<input type="button" value="我是个按钮">
//点击后会显示hello小页面
<input type="button" value="我是个按钮" onclick="alert('hello')">
提交按钮
<form action="http://www.baidu.com">
<input type="text" name="username">
<input type="submit" value="提交"><p>
</p>
</form> <input type="text"><p></p>
<input type="password"><p></p>
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女<p></p>
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏<p></p>
<input type="button" value="我是个按钮">
<input type="button" value="我是个按钮" onclick="alert('hello')">
<form action="http://www.baidu.com">
<input type="text" name="username">
<input type="submit" value="提交"><p>
</p>
</form>
<input type="file">
选择文件
<input type="file">执行结果：
select标签（下拉标签）
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
option 中定义 selected="selected" 表示默认选中.
textarea 标签（大文本标签）
无语义标签: div & span
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
<div>
<h3>大盒子</h3>
<span>小盒子</span>
<span>小盒子</span>
<span>小盒子</span>
</div>
<div>
<h3>大盒子</h3>
<span>小盒子</span>
<span>小盒子</span>
<span>小盒子</span>
</div>
<div>
<h3>大盒子</h3>
<span>小盒子</span>
<span>小盒子</span>
<span>小盒子</span>
</div> 
符号字符
小于号: <
大于号: >
按位与: &smp;
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
