web前端（一）-HTML-CSDN博客

标准	说明
结构	结构用于对网页元素进行整理和分类，HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，CSS
行为	行为是指网页模型的定义及交互的编写，Javascript

HTML标签

1、HTML语法规范

HTML标签通过尖括号包围的关键词，通常是成对出现的，例如：双标签<html></html> 单标签<br/>。双标签关系分为：包含关系和并列关系

2、HTML基本结构标签

<html>
    <head>
        <title>我利用vscode创建的第一个页面</title>
    </head>
    <body>
        加油加油
    </body>
</html>

标签名称	定义	说明
<html></html>	HTML标签	页面最大的标签，根标签。
<head></head>	文档头部	head标签中必须设置标签title
<title></title>	文档标题	拥有一个网页标题
<body></body>	文档主题	包含文档的所有内容

3、开发工具VScode

双击打开软件-新建文件（ctrl+n）-保存，注意移动要保存为.html文件-Ctrl+加号、减号可放大缩小视图-生成骨架（输入！按下Tab键）

4、VScode插件推荐

插件	作用
Chinese (Simplified) Language Pack for Visual Studio Code	中文语言包
open in browser	右击选择浏览器打开html文件
JS-CSS-HTML Formatter（不推荐）	每次保存，都会自动格式化js css和html代码
Auto Rename Tag	自动重命名配对的HTML/XML标签
CSS Peek	追踪至样式

5、HTML常用标签

（1）常用基础标签

标题标签<h1><h6>：加了标题的文字会变得加粗，字号会依次变大，一个标题独占一行。

段落标签<p></p>：文本在一个段落中会根据浏览器窗口大小自动换行，段落和段落之间会有空隙。

换行标签</br>：单标签，简单的开始新的一行，跟段落不一样。

加粗标签：<strong></strong>或<b></b>，<strong>标签加粗，语义更强烈。

倾斜标签：<em></em>或<i></i>，<em>标签加粗，语义更强烈。

删除线标签：<del></del>或<s>></s>，<del>标签加粗，语义更强烈。

下划线标签：<ins></ins>或<u></u>，<ins>标签加粗，语义更强烈。

（2）布局标签

<div></div>标签：一行只能放一个<div>，大盒子

<span></span>标签：一行上可以放多个<span>，小盒子

（3）图像标签

src是<img>标签的必须属性，用于指定图像文件的路径和文件名。

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意：图像标签可以拥有多个属性，必须写在标签名字后面，属性之间不分前后，标签名与属性、属性与属性之间均以空格分开。属性采取键值对的格式，即属性=“属性值”的形式。

路径：

相对路径：以引用文件所在位置为基础参考，而建立出的目录路径（图片相对于HTML页面的位置）

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src="1.img"/>
下一级路径	/	图像文件位于HTML文件下一级，如<img src="images/1.img"/>
上一级路径	../	图像文件位于HTML文件上一级，如<img src="../1.img"/>

绝对路径：指目录下的绝对位置，直接到达目标位置，通常以盘符开始的路径。

例如：D:\JavaScript练习\图片轮播\img或者完整的网络地址。

（4）超链接标签

<a>标签，单词为anchor，锚

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性：href 用于指定链接目标的url地址，（必须属性）超链接功能。

属性：target用于指定链接的页面打打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

链接分类：

1、外部链接：<a href="https://www.baidu.com/">百度</a>

2、内部链接：<a href="index.html">首页</a>

3、空链接：<a href="#">首页</a>

4、下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

5、网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可添加。

6、锚点链接：点击后，可快速定位到页面中的某个位置。

（5）注释标签

，快捷键：ctrl+/

特殊字符：

特殊字符	描述	字符代码
	空格符
<	小于号	<
>	大于号	>

（6）表格标签

 <table>
     <tr>
         <td>单元格内的文字</td>
     </tr>
 </table>

<table></table>用于定义表格的标签

<tr></tr>标签定义表格的行，需嵌套在<table></table>标签中

<td></td>标签定义表格的列，需嵌套在<tr></tr>标签中

td指表格数据，即单元格的内容

表头单元格标签：位于表格第一行，突出重要性，加粗居中显示

 <table>
     <tr>
         <th>表头单元格</th>
     </tr>
     <tr>
        <td>单元格内的文字</td>
     </tr>
 </table>

表格属性：

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元格是否有边框，默认为""，表示没边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或者百分比	规定表格的宽度

表格结构标签：

 <table>
        <thead></thead>
        <tbody></tbody>
 </table>

合并单元格：

跨行合并：rowspan="合并单元格的个数"，最上侧单元格为目标单元格，写合并代码。

跨列合并：colspan="合并单元格的个数"，最左侧单元格为目标单元格，写合并代码。

1、先确定是跨行还是跨列。

2、找到目标单元格，写上合并方式=合并单元格的数量，比如<td colspan="2"></td>

3、删除多余单元格。

（7）列表标签

表格用来显示数据，列表用来布局。分为无序列表、有序列表和自定义列表。

无序列表：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

1、无序列表各个列表项之间没顺序级别之分，是并列的。

2、<ul></ul>中只能嵌套 <li></li>，不允许在<ul></ul>输入其他标签或者文字。

3、<li></li>之间相当于一个容器，可以容纳所有元素。

4、无序列表会有自己的样式，一般使用CSS设置。

有序列表：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

1、<ol></ol>中只能嵌套 <li></li>，不允许在<ol></ol>输入其他标签或者文字。

3、<li></li>之间相当于一个容器，可以容纳所有元素。

4、有序列表会有自己的样式，一般使用CSS设置。

自定义列表：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

1、<dl></dl>里面只能包含<dt>和<dd>

2、<dt>和<dd>个数没限制，经常是一个<dt>对应多个<dd>

（8）表单标签

网页中，需要跟用户进行交互，收集用户资料，此时需要用到表单。由表单域、表单控件（表单元素）和提示信息3部分组成。

表单域：包含表单元素的区域，用<form>标签来定义，以实现用户信息收集和传递。

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中多个表单域

表单标签：

input：输入，<input>用于收集用户信息，包含一个type属性，输入字段拥有很多形式。

<input type="属性值"/>

type属性：

属性值	描述
button	定义可点击按钮（多数下，用于通过javascript启动脚本）
checkbox	定义复选框
fifle	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，会清除表单中的所有数据
submit	定义提交按钮，会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其输入文本，默认宽度20字符

<input>表单元素：

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

用户名：<input type="text" value="请输入用户名"/>

1、name和value是每个表单元素都有的属性值，主要给后台人员使用。

2、name表单元素的名字，要求单元框和复选框有相同的name值。

3、checked属性主要针对于单元按钮和复选框，主要作用一打开页面，就默认选中某个表单元素。

4、maxlength是用户可以再表单元素输入的最大字符数，一般较少使用。

<label>标签：

用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择的对应的表单元素上，用来增加用户体验。

<label>标签的for属性应当与相关元素的id属性相同。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

<select>下拉表单元素：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

1、<select>中至少包括一对<option>

2、在<option>中定义selected="selected"，当前选项即为默认选中项。

<textarea>文本域表单元素：

<textarea>用于定义多行输入的控件

<textarea rows="3" cols="20">
文本内容
</textarea>

1、cols="每行中的字符数"，rows="显示的行数"，实际开发中，用CSS来改变

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-注册页面</title>
</head>
<body>
 <h4>青春不常在，抓紧谈恋爱</h4>
<table width="600">
    <!-- 第一行 -->
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" id="man"><label for="man">男</label>
            <input type="radio" name="sex" id="woman"><label for="woman">女</label>
        </td>
    </tr>
    <!-- 第二行 -->
    <tr>
         <td>生日</td>    
         <td>
            <select>
                <option>--请选择年-</option>
                <option>2000年</option>
                <option>2001年</option>
                <option>2002年</option>
            </select>
            <select>
                <option>--请选择月-</option>
                <option>1月</option>
                <option>2月</option>
                <option>3月</option>
            </select>
            <select>
                <option>--请选择日-</option>
                <option>1日</option>
                <option>2日</option>
                <option>3日</option>
            </select>
         </td> 
    </tr>
    <!-- 第三行 -->
    <tr>
        <td>所在地区</td>
        <td>
            <input type="text" value="请输入地区">
        </td>
    </tr>
    <!-- 第四行 -->
    <tr>
        <td>婚姻状况</td>
        <td>
            <input type="radio" name="marriage" id="weihun"><label for="weihun">未婚</label>
            <input type="radio" name="marriage" id="yihun"><label for="yihun">已婚</label>
            <input type="radio" name="marriage" id="lihun"><label for="lihun">离婚</label>
        </td>
    </tr>
    <!-- 第五行 -->
    <tr>
        <td>学历</td>
        <td>
            <input type="text" value="幼儿园">
        </td>
    </tr>
    <!-- 第六行 -->
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox" name="love" id="wumei"><label for="wumei">妩媚的</label>
            <input type="checkbox" name="love" id="keai"><label for="keai">可爱的</label>
            <input type="checkbox" name="love" id="xianrou"><label for="xianrou">小鲜肉</label>
            <input type="checkbox" name="love" id="larou"><label for="larou">老腊肉</label>
            <input type="checkbox" name="love" id="all like"><label for="all like">都喜欢</label>
        </td>
    </tr>
    <!-- 第七行 -->
    <tr>
        <td>自我介绍</td>
        <td>
            <textarea>自我介绍</textarea>
        </td>
    </tr>
    <!-- 第八行 -->
    <tr>
        <td></td>
        <td>
            <input type="submit" value="免费注册">
        </td>
    </tr>
    <!-- 第九行 -->
    <tr>
        <td></td>
        <td>
            <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
        </td>
    </tr>
    <!-- 第十行 -->
    <tr>
        <td></td>
        <td>
            <a href="#" target="_blank">我是会员，立即登录</a>
        </td>
    </tr>
    <!-- 第十一行 -->
    <tr>
        <td></td>
        <td>
            <h5>我承诺</h5>
            <ul>
                <li>年满十八、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </td>
    </tr>
</table>
</body>
</html>