本文部分举例来自b站pink老师黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili、菜鸟教程
HTML 教程 | 菜鸟教程 (runoob.com)
用于本人学习记录,不完全按照知识点整理,仅供参考。
1.换行与段落
<p>双标签划分段落,前后有空行,<br>单标签另起一行
1111111111111
<p>段1<br /> 段2</p>
1111111111111
结果
2.div与span
<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
3.图像标签及其属性
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" title="我是前端小白">
src内容书写图像地址,其与href的区别见003: src和href的区别是什么? - 知乎 (zhihu.com)
alt内容为当图像无法加载时的替换文本
title为鼠标置于当前图像时的提示信息
4.相对路径
◆以“./”开头,代表当前目录和文件目录在同一个目录里,“./”也可以省略不写!
◆以"../"开头:向上走一级,代表目标文件在当前文件所在的上一级目录;
◆以"../../"开头:向上走两级,代表父级的父级目录,也就是上上级目录,再说明白点,就是上一级目录的上一级目录
◆以"/”开头,代表根目录
5.链接
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
6.表单
6.1表单table有关标签
<tr><tr>框定一行,<td><td>框定一个单元格,<th><th>框定的单元内容加粗居中(首行使用)
<table>
<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
<tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>
</table>
可用<thead>,<tbody>使代码结构更清晰
6.2列表
在 HTML中,有两种类型的列表:
- 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
- 有序列表 ol - 列表项的标记有数字或字母(order list)
使用 CSS,可以列出进一步的样式,并可用图像作列表项标记。
6.3表单域form有关标签
input标签: type="text"、type="password"
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
input标签: type="radio"、 type="checkbox"
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
单选按钮要加一个相同的name属性才可实现单选
<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
在单双选按钮后加一个框定选项信息的lable来增大按钮点击范围,lable中for=input标签id
select标签
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
文本域
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
html的总结就到这里了,后面更新css的内容