<!--头标签head 包含title标签(标题) meta标签(HTML网页文档的属性) style标签(内嵌css样式) link标签(引入css样式文件)-->
<!--还包含 script标签(引入javascript程序) Meta标签（元数据标签,对页面的配置）-->
<!-- 头标签内的内容不会出现在网页显示区域。 -->
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>居中
<h1>标题1</h1>
</center>
<p>段落标签</p>
<b>加粗体</b>
<i>斜体标签</i>
<font>字体标签</font>
<code>代码</code>
<font>定义文本字体</font>
显示一条水平线<br />
<hr color="red" width="200" size="10" align="left"/>
<br />width宽度 高度size 默认对齐方式是居中的 可以通过align来调整
<hr />展示一条水平线
属性：
color:颜色
left:左对齐
right:右对齐
<font></font>字体标签
属性：
color:颜色
size:大小
face:字体
<center></center>相对于父元素 文本居中
属性的定义：
color:颜色
1.英文单词：red,green,blue
2.rgb(值1,值2,值3)占比:红绿蓝 三原色值的范围:0~255
3.#值1值2值3 三原色的占比 值的范围:00~FF 下个取色器
width: 宽度
1.数值:width='20',数值的单位，默认是px(像素) 像素与电脑分辨率有关
2.%数值:占比相对于父元素的比例 50%
html是为了完成页面展示的，而CSS是用来完成页面样式的控制的，美化页面，让页面变得好看，页面布局
三、展示图片img
属性:
src:指定图片的位置
路径的写法:
相对路径(经常写) 以.开头的路径 找到资源位置 在同一级的路径下 以./代表当前目录 不写也默认如此 ../代表上一级目录
<!-- <img src="../img/pic1.png" align="right" alt ="哈哈哈" width="500" /> -->
四、列表标签
1.有序标签(通过type属性修改编号,start决定编号从哪个值开始排序)
(1)ol(定义一个有序列表):
(2)li(定义一个列表项):
2.无序标签(通过属性修改样式disc square circle)
(1)ul(定义一个无序列表):
(2)li(定义一个列表项):
<hr />
<!-- 有序列表 -->
<ol type="1" start="2">
<li>睁眼</li>
<li>起床</li>
<li>刷牙</li>
<li>洗脸</li>
<li>吃早餐</li>
</ol>
<hr />
<!-- 无序列表 -->
<ul type="square">
<li>睁眼</li>
<li>起床</li>
<li><a href="../img/pic1.png">刷牙</a></li>
<br />
<li><a href="https://link.fobshanghai.com/rgbcolor.htm" target="_self">洗脸</a></li>
<br />
<li><a href="https://link.fobshanghai.com/rgbcolor.htm" target="_blank">吃早餐</a></li>
<li><a href="moilto:123456789@qq.com">联系我们</a></li>
<br />
<a href="作业2.html"><image src ="../img/pic1.png"></image></a>
</ul>
<hr />
五、链接标签
定义一个超链接 a标签 (如果没有制定属性超链接啥也没有，需要指定属性href，表示超链接点击之后跳转的资源位置)
属性:
href:指定访问路径的URL(统一资源定位符) --->本页面跳转
target: 指定打开的方式 在href后面直接加target
(01)_self 默认值 默认-->self在本页面打开
(02)_blank 在空白页面打开 -->打开新的选项卡来展示刚刚打开的资源,
还可以把邮箱定义到这个地方,当我一点这个超链接会默认打开安装的邮件客户端给我们发邮件 href = "moilto:邮箱",前提是安装有邮箱软件
a标签 和image结合使用: 点完图片跳转到一个路径去 --->用a便签把它包裹起来，写href属性
六、div和span(结合CSS控制元素的样式)
span :包裹的作用, 默认信息在一行展示,行内标签,内联标签
div :没有任何的样式,每一个div占满一整行并自动换行，块级标签
七、语义化标签 (html5中为了提高程序的可读性,提供了一些标签)
1.<header></header>
2.<footer></footer>
八、表格标签(在html里只有行，没有列的概念的)
(1)表格标签的基本使用
table: 定义表格
属性(在学了CSS后这些属性将不再使用,我们将通过CSS的样式来控制表格的样式)
border 定义表格是否拥有边框
width 定义表格宽度
cellpadding 定义内容和单元格之间的距离,值一般定义为0
cellspacing 定义单元格之间的距离,如果值定义为0,则单元格的线会合为一条
bgcolor 背景色,定义表格的颜色
align 对齐方式
tr : 定义行
bgcolor 背景色,定义表格的颜色
align 对齐方式
td : 定义单元格 (也可以设置背景色和对齐方式) --> 合并单元格的属性
colspan : 合并列
rowspan : 合并行
th : 定义表头单元格(虽然还是td的样式，但是加粗居中了-->就可以当成表头来使用了)
要想弄一个表格，首先要有<table></table>标签
先看第一行，<tr></tr>标签，看第一行有几个单元格<td></td>标签，有几个单元格就有几个<td></td>
但是这样弄出来的表格很丑，没有边框，这个时候就需要在table标签中定义属性border --->定义表格是否拥有边框
<hr />
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="skyblue" align="left">
<!-- 1指的是一条线，表示一个像素的边框 想要表格变大变宽用width属性去控制，例如50%就是占满border50%-->
<!-- 为什么表格里面会有连条线呢，因为一条是tr的线，一条是td的线 看着比较粗 可以通过去定义单元格之间的空白让它变成一条线-->
<!-- 可以通过cellspacing = 0去定义单元格之间的空白,cellpadding = 0定义单元边沿与其内容之间的空白 让它变成一条线 -->
<thead>
<caption>学生信息表</caption>
<tr bgcolor="#D8BFD8" align="center">
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="#90EE90" align="center" rowspan="2" >张三</td>
<td>99.5</td>
<td>60</td>
<td>30</td>
</tr>
<tr>
<td>李四</td>
<td>99.5</td>
<td>60</td>
<td>30</td>
</tr>
</tbody>
<tfoot>注：122358</tfoot>
</table>
<br /> <br /> <br /> <br /> <br />
(2)表格标签中的其他标签
caption:定义表格标题
thead :表示表格中的头内容 (没有任何样式,增强可读性，可结合CSS使用) -->跟语义化标签很类似,不是html5得东西
tbody :表示表格中的体内容 (没有任何样式,增强可读性，可结合CSS使用) -->
tfoot :表示表格中脚的内容(表注) -->(没有任何样式,增强可读性，可结合CSS使用) -->
<hr >
八、表单标签
表单
概念:用于采集用户输入的数据。用于和服务器交互。(让你输入用户名、密码就是表单，输入后服务器看是否填写正确，验证是否登陆)
使用的标签:form
<!--
form:用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围 (提交数据)
*属性
*action:指定提交数据的URL #代表当前提交到当前页面,将来写服务器端的资源
*method:指定提交数据的方式
*分类(取值):一共有七种，两种比较常用
get:(参数有发过去吗?在哪里查看?F12,Headers中的Form Date里)
1.请求参数会在地址栏中显示。会封装到请求行中。(HTTP协议后讲)
2.请求参数(url)长度大小是有限制的。
3.不太安全。
post:
1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议后讲)
2.请求参数长度是没有限制的。
3.较为安全。
提交按钮<input type="submit" value="登陆" />
(表单里面的东西叫表单项)
*表单项中的数据要想被提交，必须制定其name属性
-->
<form action="#" method="get">
姓名<input name="username"> <br />
密码<input pass="password"> <br />
<input type="submit" value="登陆" />
</form>
<!--
*表单项标签:
*input:可以根据type属性值改变元素的展示样式
*type属性:
*text:文本输入框,默认值(不指定input tpye就是默认文本输入框)
*placeholder:指定输入框的提示信息,当输入框的内容发生变化的时候,会自动清空提示信息
*password:密码输入框
*radio:单选框
*注意:1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2.一般会给每一个单选框提供value属性,来指定其被选中后提交的值
3.checked属性,可以指定默认值。 checked="checked" 默认选
*checkbox:复选框(name必须一样,value得指定)
*注意:1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
2.一般会给每一个单选框提供value属性,来指定其被选中后提交的值
*file:文件选择框
*hidden:隐藏域,用于提交一些信息。
取色器:type="color" 日期:type="date"或type="datetime-local" 邮箱:type="email" 数字:type="number"
*按钮:
*submit:提交按钮,可以提交表单。
*button:普通的空白按钮,可通过value改别名。
*image:图片提交按钮,可通过
*src属性指定图片的路径。
*label:指定输入项的文字描述信息
*注意:
*label的for属性一般会和input的id属性值对应。如果对应了,则点击label区域会让input输入框获取焦点。
*select:下拉列表(选择省市区、学历) (所有的提交要加name属性,在option中设置value改变提交的值)
*子元素option:指定列表项的(默认选哪一个,在option设置selected="selected")
*textarea:文本域
*cols:指定列数,每一行有多少个字符
*row :默认多少行。(不够会默认扩容)
-->
03-13
98
98
03-15
81
81
04-22
4204
4204
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
