结构

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

标签

双标签

文字样式

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

标题标签

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

如<h1>一级标题<h2>

段落标签

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

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

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

超链接

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

如文本…

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

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

音频

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

视频

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

单标签

横杠

html
<hr>
自动换行

如

换行

html
<br>

图片

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

标签关系

存在包含并列等关系

html
<html>

<head> </head>

<strong></strong>

</html>

列表

无序列表

html
<ul>
</ul>

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

列表条目

html
<li> </li>

效果例如

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

有序列表

html
<ol> </ol>

列表条目

html
<li></li>

效果例如

同样的，ol只能嵌套li

定义列表

html
<dl></dl>

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

例如

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

表格

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

表格单元格的合并

从最左最上的开始操作

html
<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

用于输入信息的场景

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

下拉菜单

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

文本域（框）

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

label

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

button

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

布局

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

css

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

类别

字体

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

引入

html
<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>

标签选择

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

类选择

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

id选择

  1. 定义id选择器

    css
    #djj{
        color: red;
    }

  2. 使用id选择器

html
<div id="djj">
    
</div>

通配符选择器

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