HTML

2022-06-25 08:32:47 阅读：92 来源： 互联网

一、HTML概述

超文本标记语言

1.标签

由尖括号包围（）</li> <li>通常成对出现（<title>)，单个标签< />
标签嵌套（注意缩进）

属性:一个标签可能有多个属性，属性的先后顺序不影响

<img src = "logo.jpg" alt = "站标"/>
/*
标签名:img
属性:src、alt
值:"logo.jpg"、"站标"
*/

2.文件结构

<html>
    <head>//头部：浏览器搜索引擎所需信息
        <title></title>
    </head>
    <body>//主体内容：网页的具体内容
        
    </body>
</html>

HTML5文件结构

<!DOCTYPE html>//文件类型：符合HTML标准
<html lang="en">//lang属性：搜索引擎（en英文，zh中文）
    <head>
        <meta charset="UTF-8">//<meta>标签：元数据，charset属性：编码方式
        <title></title>
    </head>
    <body>
        
    </body>
</html>

二、HTML标签

1.标题

h1_{h6:一级标签}六级标签（一个页面建议只有一个好）

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

2.段落

<p></p>

连续的空格，空行只生成一个空格

2.1段内换行

<br/>

单独出现的标签

<p>段落<br/>后面的内容</p>

2.2空格字符

//&nbsp;
<p>
    内容&nbsp;&nbsp;&nbsp;
</p>

2.3预留格式标签

<pre></pre>

会保留原格式

2.4行内组合

组合行内元素，以便通过CSS样式来格式化

<span>组合的元素</span>

<style type="text/css">
span{
    color:blue;
    font-weight:bold;
}
</stylt>

2.5水平线

<hr/>

2.6注释

注释不在浏览器中显示

注释可以跨行

3.超链接

<a href="网址">文字或图片</a>

//链接到本站点其他网页
<a href="news.html">新闻</a>
//链接到其他站点
<a href="http://www.baidu.com">百度</a>
//虚拟超链接
<a href="#">板块1</a>

4.图像

<img src="路径" alt="文件名">

5.区域

<div></div>

6.列表

无序列表

<ul>
    <li></li>//列表项
</ul>

有序列表

<ol>
    <li></li>
</ol>

7.表格

<table>
    <tr>//行
        <td></td>//列
    </tr>
</table>

<th></th>//表头（加粗）

8.表单

采集用户数据的区域

表单元素：文本框、按钮、单选、复选、下拉列表、文本域

<form action="数据处理网页">
    表单元素
</form>

8.1文本框

<input type="text/password" />//文本框和密码框

<form>
    账户：<input type="text" name="userName" />
    <br />
    密码：<input type="password" name="userPassword" />
</form>

8.2按钮

提交按钮：type属性为submit

<input type="submit" value="按钮文字" name="submit" />

重置按钮type属性为reset

<input type="reset" value="按钮文字" />

8.3单选框和复选框

单选框：type属性为radio

几个选项的name属性必须相同

<input type="radio" value="值" name="名称" />

复选框：type属性为checkbox

<input type="checked" value="值" name="名称" checked="checked" />

checked=“checked"，则该项被默认选择

8.4下拉列表框

<select>
    <option>选项1</option>
    <option selected="selected">选项2</option>
</select>

selected="selected"，则该项被默认选择

8.5文本域

<textarea row="行数" cols="列数">提示内容</textarea>

三、Web语义化

让页面具有良好的结构与含义

有利于团队的开发、维护
有利于搜索引擎理解
容易兼容不同设备

<em>强调</em>//斜体
<strong>重点强调</strong>//加粗

//自定义列表
<dl>
    <dt>列表项</dt>
    <dd>列表项的描述</dd>
</dl>

四、VS Code使用

Ctrl+/：快速/撤销生成注释
快速生成标签：p>span（嵌套）、div+p（同级）、li*3(多个元素)
快速生成文字：lorem，lorem4（生成4个单词）
快速添加属性：img[src="http://www.baidu.com"]

标签：标签,列表,HTML,nbsp,type,属性
来源： https://www.cnblogs.com/cherish-0/p/16410708.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9