标签
对大小写不敏感
<>开始标签</>结束标签,ps:在开始标签中添加斜杠可以关闭空元素,比如<p />
<html>网页内容</html>
<head></head>标题内容
<title></title>标题
<base></base>为页面上的所有链接规定默认地址或目标
<link></link>连接文档与外部资源
<body></body>页面内容
<h1></h1>标题,ps:h1-h6数字越小,字体越大
<p></p>段落
<img></img>图像
<a></a>链接
<br></br>换行,或者<br />
<hr />创建水平线
<!-- comment -->注释
属性
<a>中href指定链接地址,href='http:www..com'
<h1>中align指定对齐方式,align='center'居中
<body>中bgcolor指定背景颜色,bgcolor='yellow'
<table> 中border表格边框,border='1'
以旧换新的<style>标签
淘汰标签:<center>、<front>、<basefront>、<s>、<strike>、<u>
淘汰属性:align、bgcolor、color
替换成<style>background-color属性指定背景颜色,front-family属性指定字体,color属性指定颜色,font-size属性指定字体尺寸,text-align属性指定文本对齐方式
试试ing
<br>
<head>
<title>
菜鸡本鸡
</title>
</head>
<body background='3.jpg' width='800'>
<!--添加背景图片-->
<h1 style="font-family:arial;color:green;text-align:center;font-size:80px;">全球高考</h1>
<p style="font-family:arial;color:green;font-size:20px;">世界灿烂盛大,欢迎回家</p>
<a href="http:www.baidu.com" target="_blank">welcome
<img src="4.jpg" height='100' width='200' alt="秦究游惑"></a>
<!--alt可替代文本,img放进a里面=将图片作为链接来使用-->
</body>
</html>
链接
href属性:指定链接的地址
target属性:指定被链接的文档在何处显示
name属性:命名锚
新窗口打开百度官网,welcome是元素内容
<a href="http:www.baidu.com" target="_blank">welcome</a>
图像
src源属性:图像地址
<img src="1.jpeg" width="104" height="'142"></img>
alt属性:图像加载不出来,可显示用以替换的文本
添加背景图片:<background>,若图像与网页不匹配,图像会重复显示
背景图片自适应:
<body background="1.jpg" style="background-repeat:no-repeat;background-size:100%;background-attachment:fixed;"></body>
表格
html的表格不是预设然后填充的,是写多少数据出现多少表格,这种写法我第一次见到(学得太少了呜呜呜涨见识了家人们)
border属性:设定表格边框
<tr>分割各行
<td>分割各个单元格
<td>之间不写表示空单元格,缺少边框,为了显示边框,需添加空格占位符
<th>定义表头
<caption>定义标题
逻辑结构如下图
<h4>一行一列</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行两列</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
</table>
<h4>两行两列</h4>
<table border="1">
<caption>xiu标题</caption>
<tr>
<th>张三</th>
<td>300</td>
</tr>
<tr>
<th>李四</th>
<td>400</td>
</tr>
</table>
列表
<ul></ul>无序列表每行前面有一个小黑圆圈进行标记
<ul>后还可以加type属性定义多种标记,disc小黑圆圈(默认),circle空心圆圈,square小黑方块
<ol></ol>有序列表用数字进行标记
<ol>后也可以加type属性定义多种标记,type="a/A"等都可以,默认是数字,次序依次往后增加
框架起始于<ul>、<ol>,每个列表项起始于<li>
<dl>自定义列表
框架起始于<dl>,每个列表项起始于<dt>,每个列表项的定义起始于<dd>
嵌套列表中,框架起始<ul>,随后tab键在其中增加<ul>,默认最开始始小黑圆圈-空心圆圈-小黑方块
<h4>嵌套列表</h4>
<ul>
<li>子鼠</li>
<li>丑牛</li>
<ul>
<li>寅虎</li>
<li>卯兔</li>
<ul>
<li>辰龙</li>
<li>巳蛇</li>
</ul>
</ul>
</ul>
<h4>自定义列表</h4>
<dl>
<dt>午马</dt>
<dd>未羊</dd>
</dl>
文本格式化
<b> | 粗体 |
<big> | 大号字 |
<em> | 着重文字 |
<i> | 斜体 |
<small> | 小号字 |
<strong> | 加重语气 |
<sub> | 下标 |
<sup> | 上标 |
<ins> | 插入 |
<del> | 删除 |
块元素和内联元素
块元素block level element开始新的一行
内联元素inline element不开始新的元素
<div>块元素:分割文档(块级元素),例如可以将文档中单独的一个部分显示为绿色
<span>内联元素:分割文本(行内元素),例如可以为文本中单独的一个部分设置样式属性
id属性、class属性
id属性值唯一,class可以使用多次都对大小写敏感,感觉和python里的先写一个函数然后调用差不多
id属性语法是# + id + {CSS属性},class属性语法是. + id + {CSS属性}
<style>
<!--id-->
#mystyle1{
font-family:arial;
color:green;
text-align:center;
font-size:80px;
}
<!--class-->
.mystyle2{
font-family:arial;
color:rgb(78, 203, 241);
text-align:left;
font-size:40px;
}
</style>
<body background='3.jpg' width='800'>
<!--调用id-->
<h1 id="mystyle1">全球高考</h1>
<!--调用class-->
<p class="mystyle2">世界灿烂盛大,欢迎回家</p>
<p class="mystyle2">世界灿烂盛大,欢迎回家</p>
</body>
iframe在网页中显示网页
src指向链接地址,frameborder规定是否显示边框,等于0时移除
<iframe src="URL" width="200" height="200" frameborder="0"></iframe>
路径
绝对路径:加http开头的完整路径
相对路径:
语义元素
标签 | 描述 |
---|---|
<article> | 定义文章 |
<details> | 细节 |
<figure> | 自包含内容,比如图示、图表、照片、代码清单等 |
<footer> | 页脚 |
<header> | 页眉 |
<main> | 主内容 |
<mark> | 重要的或强调的文本 |
<nav> | 导航链接 |
<section> | 文档中的节 |
<time> | 日期/时间 |