结构

<html>
<head>
存放浏览器代码
</head>
<body>
存放显示效果
</body>
</html>

标签

双标签

文字样式

加粗 加粗
倾斜 倾斜
下划线 下划线
删除线 删除线

标题标签

<h1>...</h1>
有h1到h6 6种
会自动换行加粗
若使用标签包含关系
例如
<h1>
<h2>
ddf
</h2>
</h1>
则显示的为h2样式的文本,任然换行

<h1>一级标题<h2>

段落标签

<p>...</p>
会自动换行
若使用标签包含关系

段落套段落毫无意义
段落间有空隙


<p>ddf</p>
<p>ddf</p>

超链接

<a href="http...">文本...</a>

文本…

以下是 target 属性的常见选项及其用途:

target 描述
_self 在相同的框架或窗口中打开链接(默认值)。
_blank 在新窗口或新标签页中打开链接。
_parent 在父框架中打开链接。如果没有父框架,则行为与 _self 相同。
_top 在整个窗口中打开链接,替换所有框架。
framename 在指定的框架中打开链接。framename 是一个由开发者定义的名称。

音频

<audio src="音频Url"> </audio>
contral <audio src="音频Url" contral> 显示控制台
loop <audio src="音频Url" loop> 循环播放
autoplay <audio src="音频Url" autoplay> 自动播放

视频

<video src="音频Url"> </video>
contral <audio src="视频Url" contral> 显示控制台
loop <audio src="视频Url" loop> 循环播放
autoplay <audio src="视频Url" autoplay> 自动播放,可能需要和静音搭配
muted <audio src="视频Url" muted> 静音播放

单标签

横杠

<hr>
自动换行


换行

<br>

图片

<img src="此处为一张图片" alt="此处为替换文本" title="鼠标停留时提示" width="等比例缩放,应该是比例"

标签关系

存在包含并列等关系

<html>

<head> </head>

<strong></strong>

</html>

列表

无序列表

<ul>
</ul>

用ul嵌套列表条目,即ul中只能存放li

列表条目

<li> </li>

效果例如

  • 会自动换行,li中能嵌套其他的标签等

有序列表

<ol> </ol>

列表条目

<li></li>

效果例如

同样的,ol只能嵌套li

定义列表

<dl></dl>

只能嵌套 dt和dd,其中dt为项目标题,dd为该项目的介绍

例如

<dl>
<dt>ddd</dt>
<dd>djj</dd>
<dd>dnn</dd>
</dl>

表格

<table border="1">1表示像素边距
<thead>用于区分结构
<tr>表示行,同时其并列作为行的条目
<th>x</th>行的条目,th为表头单元格
<th>xx</th>
</tr>
</thead>
<tbody>用于区分结构
<tr>
<td></td>表示内容单元格
</tr>
</tbody>
</table>

表格单元格的合并

从最左最上的开始操作

<table border="1">
<thead>
<tr>
<th>x</th>
<th>xx</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>以这个节点作为左上,rowspan向下取,colspan以这个节点向右取,后面的数字表示合并的格数。
</tr>
</tbody>
</table>
合并之后,要手动删除被覆盖的单元格,左上除外

表单

input

用于输入信息的场景

<input type="text" placeholder="string">
<!--前者是类型,后者是空白内容 --!>
<!--
text 文本框
password 密码框
radio 单选框
checkbox 多选
flie 上传文件
<input type="radio" name="aa"> a1
<input type="radio" name="aa"> a2
<!-- 用name分组,同一组的只能选一个-->

下拉菜单

<select>
<option>a</option>
<option>b</option>
<option selected>c</option>
</select>
<!-- 可实现在a,b,c三个数据之间的选择,selected表示默认选中-->

文本域(框)

<textarea>string</textarea>
后续可修改尺寸,是否可以变更大小

label

<input type="dy" name="man" id="a"> <label for="a"></label>
<!-- 将label中的for与input的id相等,可用于扩展input的范围,否则作为基础的文本表示-->

button

<button type="">
string
</button>
<!-- type用于指示类型,string表明按钮名称-->
submit 提交数据,可到后台
reset 重置数据
button 搭配javascript使用的普通按钮
<body>
<from>
<input type="text">
<br>
<input type="password">
<br>
<button type="submit">
submit
</button>
</from>
</body>
<!-- <from></from>用于锁定按钮提交的数据范围

布局

<div>
用于独占一行的布局,如QT的水平,垂直布局
</div>
<span>
用于独占一小块的布局,可塞入div中
</span>

css

color:red;/*字体颜色*/
font-size:30px;/*字号*/
width:100px;/*区块的宽*/
height:200px;/*区块的高8*/
background:green;/*区块的底色*/

类别

字体

font-size: 字体大小
front-weight: 字体粗细
front-style 文字倾斜
line-height: 行高
front-family 文字族
text-indent 文本缩进
text-align 对齐方式
text-decoration 修饰线
color: 颜色

引入

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>

标签选择

p {
color:red;
}
/*即对内置的类型进行设置

类选择

  1. 定义类选择器
.djj{
color:red;
}
/*类名为djj,使用.表示定义类
  1. 使用类选择器
<!-- 对某一标签,可使用自定义的类为此标签-->
<!-- 对某一标签,可同时使用多个不同的类,重复属性以后者为主-->
<p class:"djj xjj">
kknd
</p>

id选择

  1. 定义id选择器

    #djj{
    color: red;
    }
  2. 使用id选择器

<div id="djj">

</div>

通配符选择器

*{
color:red;/*现在页面上的所有字体颜色被改为红色*/
}
/*用于应用到整个页面所有资源,设置为同样的标签。*/