@TOC
HTML(Hyper Text Mark-up Language超文本标记语言):不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,Web 浏览器读取HTML 文档,并以网页的形式显示出来,浏览器不会显示 HTML 标签,而是通过标签来解释网页的内容。
<html>
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
单标记:
<br/> <hr/> <img/> <input/> <link/>
双标记:
<html> <head> <title> <body> <table> <tr> <td>
<span> <p> <form> <h1> <h2> <h3> <h4> <h5> <h6>
<style> <b> <u> <strong> <i> <div> <a> <script>
单标签:只有一个<>组成,例如<br/>
双标签:由<></>组成,有始有终,<>表示标签开始,</>表示标签结束,例如<div>...</div>
|块状元素 | 解释 | 行内元素 | 解释 |
|--|--|--|--|
| div | 定义文档中的分区或节 | a | 定义链接 |
| h1-h6 | 定义标题 | b | 字体加粗 |
| ui,li | 定义无序列表 | code | 定义计算机代码文本 |
| ol,li| 定义有序列表 | em | 定义为强调的内容 |
| p | 定义段落 | img | 定义图片 |
| form | 定义表单 | input | 输入框 |
| hr | 定义水平线 | label | 为input元素定义标记 |
| pre | 定义预格式化文本 | span | 组合文档中的行内元素 |
| table,tr,td…| 定义表格 | sub | 定义下标文本 |
| dl,dt,dd | 自定义列表 | sup | 定义上标文本 |
| | | textarea | 定义多行输入框 |
| | | strong | 语气更强的强调内容 |
1、display
display:block转换为块状元素
display:inline转换为行内元素
display:inline-block转换为行内块状元素
注意:如果把一个div设置成inline也要遵守行内元素的特点。
2、float
当把行内元素设置为float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了中间莫名的空白。
3、当为行内元素进行定位时,absolute(绝对定位)与fixed(固定定位)都会使原先的行内元素变成块级元素。
行内元素和块级元素的区别,各自的特点:
1、块状元素,总是在新行上开始,默认宽度是它容器的100%,也可以设定宽度和高度,内联元素,和其他元素在一行,设置宽度和高度不起作用。
2、块状元素能容纳其他块状元素或者内联元素。内联元素只能容纳文本或其他内联元素(如果内联元素容纳块状元素都会显示怪异)。
3、块状元素和内联元素一些样式属性不同。
块状元素可以设置width/height/line-height/margin/padding>
行内元素设置width/height无效,设置line-height样式怪异,设置margin和padding的时候左右有效果,上下没有效果。
在一个\<a>标签中加上bai一个\<img>标签内容,即可让该\<img>拥有一个超链接。然后可以在后面继续写文字,此文字就会显示成超链接,点击该文字即可进入超链接。
下面实例:
<a href="www.baidu.com"> <img border="0" src="/i/eg\_buttonnext.gif" /></a>
有序列表 ol li
type:有五个属性值:1、a、A、i、I(罗马数字),表示列表前缀的格式。
start:属性值位数字,表示从type类型的第几个数字开始,有点绕,比如当你选的type=“a”,start=“3”,表示选择的是小写字母类型,从第三个字母c开始充当列表前缀。
<ol >
<li>dd</li>
<li>aa</li>
<li>dd</li>
</ol>
无序列表 ul li
列表默认的前缀样式是实心圆其实是disc。
ul标签中的属性是type,type属性值有disc(实心圆默认)、circle(空心圆)、square(实心正方形)、none(取消前缀)。
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
自定义列表 dl dt dd
<h3>自定义列表</h3>
<dl>
<dt>一级</dt>
<dd>二级</dd>
<dd>二级</dd>
<dt>一级</dt>
<dd>二级</dd>
<dd>二级</dd>
</dl>
1.有序列表和无序列表之间的区别是:前缀的不同,有序的是有大写字母和小写字母、数字、罗马数字等,而无序列表是实心圆、空心圆、实心正方形。
2.但是共同点是都有前缀。
3.而自定义列表与有序无序的区别是没有前缀,而且是有缩进
基本语法:\<a> 超链接</a>
例如:\<a href="https://zxfdog.blog.csdn.net/">花狗Fdog的博客</a>
属性:
input(包含多种输入控件):
select(下拉列表):
用<option>定义下拉列表框中的可用选项。
下拉选择框支持多选multiple:multiple="multiple"。input默认选中属性 checked,默认选中属性 selected。
例如:
<form>
用户名:<br />
<input type="text"><br />
手机号:<br />
<input type="text"><br />
密码:<br />
<input type="password"><br /><br>
<select style="width: 170px;">
<option value="共青团员">共青团员</option>
<option value="群主">群主</option>
<option value="党员">党员</option>
</select><br><br>
<input type="button" value="提交" style="width: 150px;"/>
</form>
表格标题由<caption>标签定义。
由 \<th> 标签定义表头单元格 ,表头自动加粗。
由\<td>定义,字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
由<tr>定义,每个表格均有若干行。
rowspan属性用于合并行,colspan属性用于合并列,在\<th>标签中添加。
例如:
<table border="1"> <!--表格开始-->
<caption>博主列表</caption> <!--这是本表格的标题-->
<tr> <!--第一行开始-->
<td>姓名</td> <!--第一个单元格-->
<td>性别</td>
<td>年龄</td>
</tr> <!--第一行结束-->
<tr>
<td>花狗Fdog</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>君莫笑</td>
<td>男</td>
<td>21</td>
</tr>
</table> <!--表格结束-->
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。