HTML+CSS的学习之路(二)

China☆狼群 提交于 2020-02-03 00:18:31

HTML标签(下)

表格标签

表格的作用:用来显示数据,使数据看上去不那么冗杂,增强数据的可读性。 表格不是用来布局页面的,而是用来展示数据的。

表格的基本语法:

<table></table>

用于定义表格的标签
<tr></tr>
用于定义表格的行

<td></td>

用于定义表格的单元格

表格是嵌套关系

<table>---<tr>---<td>

表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示

<th></th>(table head)

表格的相关属性设置:
注意的是这些属性都写在<table后面>
<table align="center">
align:有center,left,right选择,意义是决定表格放在页面的哪边位置,是居中还是居左右。
border:有1和""选择,表示决定表格单元是否拥有边框,默认为“”,表示没有边框。
cellpadding:规定单元边沿与其内容之间的空白,默认1像素
cellspacing:规定单元格之间的空白,默认2像素。
width:规定表格的宽度

表格结构标签:
使表格结构更清晰,语义更明确。
1.
<thead></thead>

:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。

2.

<tbody></tbody>

用于定义表格的主体,主要用于放数据本体。

3.以上标签都是放在

<table></table>

合并单元格方式:
1.跨行合并:rowspan="合并单元格的个数"
2.跨列合并:colspan="合并单元格的个数”
目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码。
跨列:最左侧单元格为目标单元格,写合并代码。

合并单元格三部曲:
1.先确定是跨行还是跨列合并。
2.找到目标单元格,写上合并方式。
3.删除多余的单元格。

列表标签

表格是用来展示数据的,那么列表就是来布局的。
列表最大的特点就是整齐,整洁,有序,它作为布局会更加自由和方便。
根据使用情景不同,列表可以分为三大类:无序列表,有序列表和自定义列表。
<ul>

标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用

<li>

标签定义。

无序列表(unorder list):
1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.<li></li>之间相当于一个容器,可以容纳所有元素。
4.无序列表有自己的样式属性,但在实际运用时,我们会用CSS来设置。

有序列表(order list):
<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。
有序标签要注意的是:
1.<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li></li>之间相当于一个容器,可以容纳所有元素。
3.有序列表有自己的样式属性,但在实际运用时,我们会用CSS来设置。
自定义列表:
在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
</dl>

1.<dl></dl>里面只能包含<dt>和<dd>
2.<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>

表单标签

当需要收集用户信息资料的和用户进行交互的时候就可以用表单标签。

表单标签:
在HTML中,一个完整的表单通常由表单域,表单控件(也称为表单元素)和提示信息3个部分构成。
表单域是一个包含表单元素的区域。
在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form>的属性:
action:url地址 作用:用于指定接收并处理表单数据的服务器程序的url地址
method: get/post 作用:用于设置表单数据的提交方式,其取值为getpost
name:名称 作用:用于指定表单的名称,以区分同一个页面中的多个表单域
表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
1.input输入表单元素
<input />标签为单标签 属性为type,type有password,text,button,checkbox等等 视情况选用。
除此以外,还有一些常用属性如:
1.namevalue是每个表单元素都有的属性值,主要给后台人员使用。
2.name表单元素的名字,要求单选按钮和复选框要有相同的name值。
3.checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素。
4.maxlength是用户可以在表单元素输入的最大字符数,一般较少使用。
<label>标签为input元素定义标注(标签)。<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法格式:

<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />

核心:<label>标签的for属性应当与相关元素的id属性相同
2.select下拉表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。

<select>
	<option>选项1</option>
	<option>选项2</option>
</select>

注意选项:
1.<select>中至少包含一对<option>
2.在<option>中定义selected = "selected"时,当前项即为默认选中项。
3.textarea文本域表单元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
在表单元素中,<textarea>标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS来改变大小。


后记

至此,HTML的基础学习算是告一段落了,我的这些也都是老师视频上搬运过来的笔记,如果想要更详细的了解可以去B站搜黑马程序员pink老师HTML+CSS的视频观看。 另外呢,这里还有三个网站可以帮助我们更好的学习前端知识。 大概就这么些,大伙如果有什么想交流或者什么意见欢迎在下方留言。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!