该文章主要写了如下几个方面：
1.超链接的几种常用用法
2.常见的3种列表的表示方式
3.表格的基本标签及其属性
4.表单的基本标签及其属性
5.文本的常用属性
一、 常用标签
- 超链接
- 超链接用<a></a>标签表示，具有以下两个基础属性：
-
href:要跳转的路径
-
target：跳转方式
- -self(默认值)，从当前选项卡直接跳转到目标界面
- -blank,重新打开一个选项卡跳转到目标页面
<a href="https://www.baidu.com" target="_blank">去百度</a> -
- 空链接
-还没决定跳转到哪个目标页面时，可以用#，一个#会回到当前页面的顶部，可以用两个#<a href="#">去顶层</a> <a href="##">别点我，我是空连接</a> - 锚点链接
- 在当前页面内进行跳转，在要跳转到的位置的标签中设置id属性，用<a></a>标签的href属性等于#id属性值
以上代码的效果如下：<p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <font color="blue" id="one">第一层</font> <a href="#dibu">去底部</a> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <font color="red" id="two ">第二层</font> <a href="#dibu">去底部</a> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <font color="green" id="three">第三层</font> <a href="#dibu">去底部</a> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <p>练习空连接和锚点链接</p> <font id="dibu">底部</font> <a href="#one">去第一层</a> <a href="#two">去第二层</a> <a href="#three">去第三层</a>
- 超链接用<a></a>标签表示，具有以下两个基础属性：
-
列表
-
有序列表
-遵循一定的顺序,用一组<ol></ol>标签管理,<li></li>标签是列表项,<ol></ol>标签只能包含<li></li>标签,<li></li>标签可以包含其它标签。有序列表的前边具有序号。<ol> 最贵的电子商品 <li>电脑</li> <li>手机</li> <li> <a href="##">智能手表</a> </li> <li>音响</li> </ol>以上代码效果如下：
-
无序列表
-没有遵循一定的顺序,用一组<ul></ul>标签管理,<li></li>标签是列表项,<ul></ul>标签只能包含<li></li>标签,<li></li>标签可以包含其它标签。无序列表前边有小黑点。<ul> 我读过的书 <li>《狼图腾》</li> <li>《重返狼群》</li> <li>《曾国藩传》</li> <li> <a href="##">《乖，摸摸头》</a> </li> <li>《第一序列》</li> </ul>以上代码效果如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxsgms5M-1604192655760)(../img/无序列表.jpg)]](https://img-blog.csdnimg.cn/20201101091028156.jpg#pic_center)
-
自定义列表
-围绕着一个主题,被一组<dl></dl>标签管理,<dt></dt>标签是主题,<dd></dd>标签是列表项,<dl></dl>标签只能包含<dt></dt>标签和<dd></dd>标签,<dt></dt>标签和<dd></dd>标签可以包含其他标签<dl> <dt> <h1>相关信息</h1> </dt> <dd>身高</dd> <dd>体重</dd> <dd>血型</dd> <dd>性别</dd> </dl>以上代码效果如下：
-
-
表格
- 表格中的常见标签
-<table></table>标签:表格标签，表格在不设置固定的宽度时，由单元格撑开
-<caption></caption>标签:表格标题标签，默认在表格上方居中
-<th></th>标签：表头标签，默认该标签中的内容水平居中
-<tr></tr>标签:行标签
-<td></td>标签:单元格，单元格的宽度是由当前列中最宽的单元格中的内容决定的 - 表格的属性：
-border 边框
-cellspscing:单元格与单元格之间的间距，默认是2px
-width：表格宽度
-height：表格高度
-align:水平位置：left(默认)/center/right，放在 <table></table>标签里是让整个表格在网页中居中，
要想让单元格中的文字居中， 可以放在<tr></tr>标签中
-rowspan:跨行，相当于纵向合并单元格，后边值直接写数字
-colspan:垮列，相当于横向合并单元格，后边值直接写数字
<table width="600" height="300" border="1" cellspacing="0" align="center"> <caption> <h1>课程表</h1> </caption> <tr bgcolor="aqua" align="center"> <th>项目</th> <th colspan="5">课程</th> <th colspan="2">休息</th> </tr> <tr bgcolor="aquamarine" align="center"> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr align="center"> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>体育</td> <td>化学</td> <td>物理</td> <td rowspan="6">休息</td> </tr> <tr align="center"> <td>语文</td> <td>数学</td> <td>英语</td> <td>体育</td> <td>化学</td> <td>物理</td> </tr> <tr align="center"> <td>语文</td> <td>数学</td> <td>英语</td> <td>体育</td> <td>化学</td> <td>物理</td> </tr> <tr align="center"> <td>语文</td> <td>数学</td> <td>英语</td> <td>体育</td> <td>化学</td> <td>物理</td> </tr> <tr align="center"> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>体育</td> <td>化学</td> <td>物理</td> </tr> <tr align="center"> <td>语文</td> <td>数学</td> <td>英语</td> <td>体育</td> <td>化学</td> <td>物理</td> </tr> </table>- 以上代码的效果图如下：
- 表格中的常见标签
-
表单
表单常用标签及其属性- <label></label>标签,具有for属性:
- for 关联其他标签的id属性值,实现单击文本,让目标获取焦点
- <input>标签,具有以下type属性:
- type属性：type的值有以下几个，每个值都具有不同的意义
- text：输入框，输入的内容明文显示
- password：密码框，输入的值显示为小黑点
- radio：单选按钮，可以设置组和默认选中
- name：组,将多个单选的name值设置相同,可以实现单选效果
- checked 默认选中，具有三种书写方式
checked=""/ checked=“checked”/ checked
- checkbox:复选框,也可是设置默认选中，具体方法同radio
- button:普通按钮
- submit:提交按钮
- reset :重置按钮
- type属性：type的值有以下几个，每个值都具有不同的意义
- <select></select>标签:下拉菜单，可以在里边嵌套一个<optgroup></optgroup>标签,形成下拉组，<optgroup></optgroup>标签具有label属性
- label：组标题
- <option></option>标签:下拉项,可以设置默认选中
- selected：默认选中 具有三种书写方式
selected/selected=“selected”/selected=""
- selected：默认选中 具有三种书写方式
- <textarea></textarea>标签:文本域/多行文本
- <form></form>标签:提交表单具有以下属性:
- action 提交地址
- method 提交方式 get(通过url地址提交)/post(通过请求报文提交)
- <button></button>标签:按钮,具有type属性，type的属性值为以下三种：
- button 普通按钮
- submit(默认值) 提交按钮
- reset 重置按钮
<form action="http://www.baidu.com" method="post"> <label for="txt">姓名</label> <input type="text" id="txt"> <br><br> <label for="pwd">密码</label> <input type="password" id="pwd"> <br><br> 性别：<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 <br><br> 学历：<input type="radio" name="xl" id="bk"> <label for="bk">本科</label> <input type="radio" name="xl">小学 <input type="radio" name="xl" checked="checked">幼儿园 <br><br> 您的爱好是： <input type="checkbox" checked="">抽烟 <input type="checkbox">喝酒 <input type="checkbox">烫头 <br><br> 您的国籍是： <select name="" id=""> <option value="" selected="selected">中国</option> <option value="">韩国</option> <option value="">日本</option> <option value="">泰国</option> </select> 您的第二国籍是： <select> <optgroup label="欧洲"> <option value="">法国</option> <option value="">英国</option> <option value="" selected="selected">瑞士</option> <option value="">德国</option> </optgroup> <optgroup label="非洲"> <option value="">刚果</option> <option value="">牙买加</option> <option value="">坦桑尼亚</option> <option value="">南非</option> </optgroup> </select> <br><br> 请描述一下您自己 <br><br> <textarea > </textarea> <br><br> <input type="button" value="botton"> <input type="reset" value="reset"> <input type="submit" value="提交"/> <br><br> <button type="button">botton</button> <button type="submit">submit</button> <button type="reset">reset</button> </form>以上代码的效果如下图：
- <label></label>标签,具有for属性:
二、 css 初体验
- css(Cascading Style Sheet)样式表或层叠样式表，主要通过设置HTML页面中的文本内容（字体、大小、对齐等）、图片形式（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，也可以针对不同的浏览器设置不同的样式。
- css中文本的常用属性
- 字体的颜色
- 所有的颜色都是由红绿蓝三种原色组成，每种颜色的取值范围都是0-255，有三种书写方式：
-第一种：单词方式： color:red；
-第二种：rgb方式： color:rgb(255,255,255)；
-第三种：十六进制方式：(以#开头)
color:#FFFFFF； - 字号
-单位px,chrome的默认字号是16px
-书写方式： font-size：60px； - 字体
-字体如果是用一个词组表示的话要用双引号，chrome的默认字体是微软雅黑
-书写方式： font-family:“宋体”； - 加粗
400或者normal 是默认值
700或者bold是加粗
-书写方式： font-weight:bold; - 字体样式
font-style:normal（正常）、italic(倾斜)； - 文本水平对齐：
-书写方式：text-align：left(默认值)/center/right; - 首行缩进：
-单位：em,1em等于当前一个字号的大小
-书写方式：text-indent:2em; - 文本的各种划线
text-decoration：overline(顶划线)、line-through(中划线)、underline(下划线)、none(没有划线); - 鼠标样式
cursor:pointer(小手);
如有错误，欢迎斧正；如有疑问，欢迎留言讨论。