HTML：超文本标记语言

最新推荐文章于 2023-07-13 12:43:33 发布

打工人王某

最新推荐文章于 2023-07-13 12:43:33 发布

阅读量1.3k

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_45905371/article/details/122716418

版权

HTML：超文本标记语言

html-决定页面上显示什么内容

css - 页面上的内容显示的风格（决定页面上的美观程度）

JavaScript - 页面特效

html是解释型语言，不是编译型，标签出现错误不会解释

基础标签

页面由两对标签组成，一个开始标签一个结束标签
html中有两对标签 -head -body
title 表示页面的标题可以在meta中设置编码格式
br表示换行 br标签是一个单标签：开始标签和结束标签是同一个
p 标签标识段落标签
img 表示图片标签 src=""引用图片，表示图片的路径可以设置图片显示的大小 alt属性可以设置图片的提示
h1 表示一级标题标题一直到 h6
列表标签：默认是1、2、3、…
- 设置type属性="A"即可为abcd
- start=3 即为从第三个开始计数：C、D、E、…
- ol
  li
  li
  li
  ol
- ```
<ol type="A" strat=3>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
```
- ul表示无序列表 type可以设置前面的显示样式，例如：“circle”
  
  ul
  li
  li
  li
  ul
b 标签表示加粗daw
i 标签表示斜体daw
sub表示下标H₂0
sup表示上标0²
下面是html实体
注册商标 &reg； ®
版权符号 &copy； ©
小于号 &lt；<
span标签不换行的块标记：表示进行特殊的修饰，增加属性进行更改格式，只加span啥也不变
a标签表示超链接百度一下
- href表示连接的地址，
- target="_black" 表示打开一个新窗口
  - _self 在本窗口打开
  - _parent 在父窗口打开
  - _top 在顶层窗口打开
div 层

div 层
hr 直线

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>第一<br/>段</p>
    <p>第二段</p>
    <p>第三段</p>
    <img src="12.jpg" width="62" height="43" alt="这是一张图片"/>
    <h1>
        标题1
    </h1>
    <h2>
        标题2
    </h2>
    <!-- 标题一直到 h6 -->
</body>
</html>

table 标签

表格 table

行 tr

列 td

显示边框 border

宽度 width

单元格间距 cellspacing

单元格填充 cellpadding

和美观有关系的基本上都过时了-- CSS替代了

tr中的一个属性 align=“center” 居中对齐

rowspan=“2” 合并两个单元格

<table border="1" width="400" >
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>号码</td>
        <td>编号</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>21</td>
        <td>123</td>
        <td>321</td>
    </tr>
</table>

<table border="1" cellpadding="4" cellspacing="0" width="400">
    <tr align="center">
        <td>名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
    </tr>
    <tr align="center">
        <td>苹果</td>
        <td rowspan="2">5</td>
        <td>20</td>
        <td>100</td>
        <td>删除</td>
    </tr>
    <tr align="center">
        <td>菠萝</td>
        <td>20</td>
        <td>100</td>
        <td>删除</td>
    </tr>
    <tr align="center">
        <th>西瓜</th>
        <th>5</th>
        <th>20</th>
        <th>100</th>
        <th>删除</th>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ycBbnnGr-1643262152903)(C:\Users\MissLiuAndMrWang\AppData\Roaming\Typora\typora-user-images\image-20220127110658069.png)]

表单 form

<input type="text" name="nick"/><br/>
<input type="password" name="pwd"/><br/>

其中name属性必须要指定的，否则无法将数据发送给服务器

<form>
    昵称：<input type="text" name="name"/>
    密码：<input type="password" name="pwd">
    性别：<input type="radio" name="gender" value="male"/>男
         <input type="radio" name="gender" value="female"/>女
</form>

action 表示发送的目的地
method 表示请求方式
单选框和复选框名字必须保持一致，以达到互斥的效果
checked 和 selected 表示默认选择

<!--action 表示发送的目的地-->
<form action="1.html" method="post">
    昵称：<input type="text" name="name"/><br/>
    密码：<input type="password" name="pwd"><br/>
    性别：<input type="radio" name="gender" value="male" checked="checked"/>男
         <input type="radio" name="gender" value="female"/>女<br/>
    爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
         <input type="checkbox" name="hobby" value="football"/>足球
         <input type="checkbox" name="hobby" value="earth"/>地球<br/>
    星座：<select name="star">
            <option value="1">金牛座</option>
            <option value="2" selected>双子座</option>
            <option value="3">天蝎座</option>
            <option value="4">魔羯座</option>
         </select><br/>
    备注：<textarea name="remark" rows="4" cols="50"></textarea><br>
        <input type="submit" value="注 册"/>
        <input type="reset" value="重置">
        <input type="button" value="这是一个普通按钮">
</form>

frameset 框架

用于分割整个页面

<html>
<head>
    <frameset rows="20%,*">
        <frame src="12.jpg"/>
        <frameset cols="15%,*">
            <frame src="1.html">
            <frameset rows="80%,*">
                <frame src="2.html">
            </frameset>
        </frameset>
    </frameset>
</head>
</html>