HTML基础（常用标签）

最新推荐文章于 2024-02-20 01:52:26 发布

啊年糕

最新推荐文章于 2024-02-20 01:52:26 发布

阅读量464

点赞数 1

文章标签： html 前端学习

本文链接：https://blog.csdn.net/weixin_53646286/article/details/128585712

版权

HTML是超文本传输语言，用于构建网页结构。主要标签包括title（文档头部）、h1-h6（标题）、div和span（布局控制）、a（超链接）、img（图片）、ul和ol（列表）、table（表格）、input（输入框）、select（下拉框）、textarea（多行文本输入）以及form（表单提交）。这些元素构成了网页的基本元素，允许创建交互式和结构化的网页内容。

摘要由CSDN通过智能技术生成

什么是HTML

HTML标签

1. 编码，title --文档头部head

2. 标题--h1-- 文档主体内容body（以下均为body中的内容）

3. div和span

4. 超链接--a（行内标签）

5. 图片--img（自结束标签、行内标签）

10. 多行文本输入框--textarea（行内标签）

11. 页面填写数据提交到后台--form

什么是HTML

HTML是超文本传输语言，是浏览器能够识别的语言

HTML标签

1. 编码，title --文档头部head

 <head>    
    <meta charset="UTF-8">    
    <title>我的Web</title>
</head>

title内容：

2. 标题--h1-- 文档主体内容body（以下均为body中的内容）

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

3. div和span

div 一个人占一整行（块级标签）

<body>
    <div>内容1</div>
    <div>内容2</div>
</body>

块级标签：一个标签占一行

span 自己多大占多少（行内标签）

<body>
    <span>内容3</span>
    <span>内容4</span>
</body>

行级标签：一个标签仅占所需大小

4. 超链接--a（行内标签）

跳转到其他网站

<a href = "https://blog.csdn.net/weixin_53646286">点击跳转</a>

跳转到自己的网站

<a href = "http://127.0.0.1:5000/show/info">点击跳转</a>
<a href = "/show/info">点击跳转</a>

在当前页面跳转

<a href = "/show/info">点击跳转</a>

新开一个页面跳转

<a href = "/show/info" target = '_blank'>点击跳转</a>

5. 图片--img（自结束标签、行内标签）

直接连接别人的图片地址（但可能有防盗链）

<img src='https://xxxxxxx/xx.jpg'/>

显示自己的图片：
- 自己的项目中创建static目录，图片放在该目录

<img src='/static/xxx.jpg'/>

图片格式设置：

按像素
<img style="height: 100px; width: 100px" src='/static/img1.jpg'/>
按比例
<img style="height: 10%; width: 10%" src='/static/img1.jpg'/>
只有一个属性时长宽等比例放缩
<img style="height: 100px" src='/static/img1.jpg'/>

6. 列表--ul、ol（块级标签）

无序号的列表ul

<ul>
    <li>中国移动</li>
    <li>中国电信</li>
    <li>中国联通</li>
</ul>

有序号的列表ol

<ol>
    <li>中国移动</li>
    <li>中国电信</li>
    <li>中国联通</li>
</ol>

7. 表格--table（行内标签）

<table>
    表头，边框宽1
    <thead border="1"> 
        tr 表示一行 th表示一列（列名）
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    表主体
    <tbody>
        tr 表示一行 td表示一列（列值）
        <tr>
            <td>10</td>
            <td>zjj</td>
            <td>23</td>
        </tr>
        <tr> 
            <td>10</td>
            <td>hzg</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

8. 输入框--input（行内标签）

文本框

<input type='text'/>

密码框（输入文本会被隐藏，以·····代替）

<input type='password'/>

选择文件框

<input type='file'/>

单选框 name一致时只能选择一个

<input type='radio' name = 'n1' />男
<input type='radio' name = 'n1' />女

复选框

<input type='checkbox'/>篮球
<input type='checkbox'/>足球
<input type='checkbox'/>棒球

普通按钮

<input type='button' value='普通按钮'/>

提交表单按钮

<input type='submit' value='提交表单'/>

9. 下拉框--select（行内标签）

单选框

<select>
    <option>北京</option>
    <option>上海</option>
    <option>杭州</option>
</select>

多选框

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>杭州</option>
</select>

10. 多行文本输入框--textarea（行内标签）

<textarea></textarea>

设定高度为3行
<textarea rows='3'></textarea>

11. 页面填写数据提交到后台--form

form标签包裹的数据才能被提交
提交方式：method='get' or 'post'
提交的地址：action='/xxx/xxx'
在form标签里面必须有submit标签
在form里面的标签：input/select/textarea等一定要写name属性

<form method="post" action="/register">
    <input type='text' name='user'/>
    <input type='password' name='pwd'/>
    .......
    <input type='submit' value='提交表单'/>
</form>