我是目录:
1、标题、段落标签
<h1>标题标签</h1>
<p>段落标签</p>
<br/>换行标签
2、文本格式化标签
我是<strong>加粗</strong>的文字
我是<em>倾斜</em>的文字
我是<del>删除线</del>
我是<ins>下划线</ins>
3、布局标签(div、span)
div、span就是一个盒子 用来布局的
div表示分割、分区 独占一行 大盒子
<div>我是一个div标签</div>
<div>我是一个div标签</div>
span表示跨度、跨距 全部占一行 小盒子
<span>百度</span>
<span>搜狐</span>
<span>网易</span>
4、图像标签
<h4>图像标签的使用</h4>
<img src="dog.jpg"/>
<h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
<img src="dog1.jpg" alt="我是修狗"/>
<h4>title 提示文本 鼠标放在图像上,提示的文字</h4>
<img src="dog.jpg" alt="我是修狗" title="我是一条小狗"/>
<h4>width 给图像设定宽度:</h4>
<img src="dog.jpg" alt="我是修狗" title="我是一条小狗" width="200"/>
<h4>height 给图像设定高度:</h4>
<img src="dog.jpg" alt="我是修狗" title="我是一条小狗" height="400"/>
<h4>border 给图像设定边框:</h4>
<img src="dog.jpg" alt="我是修狗" title="我是一条小狗" width="200" border="15"/>
图像标签属性注意点:
- 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式,即 key = “value” 的格式,属性 = “属性值”
5、相对路径、绝对路径
相对路径:以 引用文件所在位置 为参考基础(图片相对于HTML页面的位置)
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
6、链接标签、锚点标签
<a href="跳转目标 url" target="目标窗口的弹出方式 _self为默认值 _blank为新窗口打开">文本或图像</a>
<h4>1、外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<h4>2、内部链接:网站内部页面之间的相互链接</h4>
<a href="公司简介.html">公司简介</a>
<h4>3、空链接:#</h4>
<a href="#">公司地址</a>
<h4>4、下载链接:地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.zip">公司地址</a>
<h4>5、网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg"></a>
<h4>6、锚点链接:点我们点击的链接,可以快速定位到页面中的某个位置</h4>
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如:<a href="#two">个人简介</a>
找到目标位置的标签,里面添加一个id属性 = 刚才的名字,如:<h3 id="two">介绍</h3>
7、表格标签:显示数据
(1)表格的基本语法:
<table>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr> <td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr> <td>张学友</td> <td>男</td> <td>52</td></tr>
<tr> <td>郭富城</td> <td>男</td> <td>56</td></tr>
<tr> <td>黎明</td> <td>男</td> <td>51</td></tr>
</table>
(2)表头单元格标签:
(3)表格属性:
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr> <td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr> <td>张学友</td> <td>男</td> <td>52</td></tr>
<tr> <td>郭富城</td> <td>男</td> <td>56</td></tr>
<tr> <td>黎明</td> <td>男</td> <td>51</td></tr>
</table>
(4)表格结构标签:
(5)合并单元格:
合并单元格方式:
- 跨行合并: rowspan=“合并单元格的个数”
- 跨列合并: colspan=“合并单元格的个数”
目标单元格:(写合并代码)
- 跨行:最上侧 单元格为目标单元格
- 跨列:最左侧 单元格为目标单元格
8、列表标签:布局页面
根据使用场景不同,列表分为三大类:
(1)无序列表:(重点)
(2)有序列表(理解)
(3)自定义列表(重点)一个大哥带着下面一群小弟
9、表单标签:为了收集用户信息
(1)表单域:
(2)表单控件(表单元素)
① < input > 输入表单元素
<form>
<!-- text文本框用户可以输入任何文字 -->
用户名:<input type="text" name="username" value="请输入用户名"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码:<input type="password" name="password"> <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
性别:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"> <br>
<!-- checkbox 复选框 可以实现多选-->
爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="登录"><br>
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用 -->
<input type="button" value="注册">
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像:<input type="file">
</form>
< label > 标签:
② < select > 下拉表单元素
③ < textarea > 文本域元素