HTML基础知识：语法、标签与交互元素-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_64054032/article/details/129698549

创建html项目

新建html项目，用记事本打开：

只需要浏览器就可以执行里面的代码，不需要安装额外的运行环境（例如JDK）

html不需要编译，浏览器读取后就可以执行

上述hello world在文件是如下代码：

其并不是严格符合HTML语法的，但是即使语法存在问题，浏览器也会尽可能执行，

这是得利于浏览器的鲁棒性(robustness)（对他越粗鲁，表现得越好）

上图才是符合HTML语法的语句，需要有一个head和一个body，head放一些属性信息，body放页面上显示的内容

html的语言特点：

1.是由一些标签构成的

2.几乎每个标签都有开始标签和结束标签(只有单个标签的称为单标签)

3.标签之间可以相互嵌套（例如上图中 html是head和body的父标签，head和body是html的子标签）

html的标签（tag），也可以称为元素（element）

用vscode来编写html

通过使用！加enter 可以得到以上模板

<!DOCTYPE html>
//这一行为是html文件的声明

<html lang="en">
//给予了lang这样的属性
//html标签是可以在开始标签中写一些属性的（键值对）
//使用空格来分割键值对，使用=来分割键和值并且这里的=两侧不能有空格 
//lang全称是language，en全称是english，从而提醒浏览器当前是什么语言，是否需要自动翻译

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <title>Document</title>
    //html的标题 也就是选项卡的名称    

</head>
<body>
	hello
</body>
</html>

在开启浏览器查看源代码后在页面按下F12就可以查看源代码

html的常用标签

注释标签：

<!---->
<!--你好我好大家好-->
//需要在同一行写注释

注释标签不会在网页中显示出来

标题标签：

	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
//数字越大，越小越细
//数字越小，越大越粗

段落标签

	<p>
		这是一个段落 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae sint est quidem dignissimos eveniet labore dolorum cumque quod eligendi dolore. Non ipsam dolor earum error impedit optio quidem autem vel.
	</p>
//段落标签之间会有换行，并且有明显的段落间距
//使用lorem来生成随机字符串的一个方式，文字排版的时候可能会用到

在html里面直接回车换行写段落是不行的，需要换行标签

html中对于制表符，换行符，多个连续的空格都不会当成是代码内容，会自动把这些东西给忽略

换行标签

	<p>
		这是一个段落<br>
		 Lorem ipsum dolor sit,<br> amet consectetur adipisicing elit. Repudiandae sint est quidem dignissimos eveniet labore dolorum cumque quod eligendi dolore. Non ipsam dolor earum error impedit optio quidem autem vel.
	</p>

//<br>是单标签 只有开始标签没有结束标签

常用的字符样式标签：

//加粗
strong b

//倾斜
em i

//删除线
del s

//下划线
ins u

	<strong>加粗</strong>
	<b>加粗2</b>
	<em>倾斜</em>
	<i>倾斜2</i>
	<del>删除线</del>
	<s>删除线2</s>
	<ins>下划线</ins>
	<u>下划线2</u>

独占一行的标签，叫做块级元素

不独占一行的标签，叫做行内元素

块内元素和行内元素可以相互转化

图片标签

<img>
//为单标签 且必须带有一个src属性 通过这个属性来指定你要显示图片的路径
//路径可以写绝对路径，相对路径（基准路径就是当前html所在的目录）和网络路径
//网络路径就是一个图片的网络地址（右键复制图片地址的那个就是）

//还可以通过后面加属性来确定宽度和高度 例如
width="200px" height="150px"
//px是像素，也就是屏幕最基本的单位

//但是不能定位坐标 坐标需要使用css

后面的alt平时用不到，是用于在如果图片挂了的情况下，就会显示alt内的文字，提示图片是啥

img也可以展示gif图片

超链接标签

链接就是快捷方式，超链接意思就是外部网站的资源

<a href="https://www.sougou.com">搜狗</a>
<a href="https://www.baidu.com">百度</a>

默认是蓝色带下划线的文字，访问过一次后就变成了紫色，清除浏览数据后就会又变回蓝色

也可以和自己内部的链接进行跳转

还可以对应一个zip文件来进行下载，还可以把图片等任何元素添加元素（放到a标签中）

表格标签

table标签 表示整个表格
tr表示表格的一行
td表示一个单元格
th表示表头单元格，会居中加粗
thead表格的头部区域（注意和th区分，范围是比th要大的）
tbody表格得到的主体区域

 	<table>
		<tr>
			<th>姓名</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>张三</td>
			<td>110</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>120</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>119</td>
		</tr>
	</table>

然后给table加上属性

	<table width="500px" height="300px"  border="=1px">

文字居中也需要使用css

列表标签

有序列表 ol (ordered list)
无序列表 ul (unordered list)
列表项   li (list item)


	<ol>
		<li>咬人猫</li>
		<li>兔子</li>
		<li>咬人狗</li>
	</ol>
	<ul>
		
		<li>咬人猫</li>
		<li>兔子</li>
		<li>咬人狗</li>
	</ul>

//li标签也可以放一些其他内容 不止文字

表单标签

就是为了和用户交互的

form标签

进行前后端的交互，功能是构造一个http请求

input标签

有很多形态，这些形态就表示了不同的元素效果


	<input type="password">
	<input type="radio" name="gender"> 男
	<input type="radio" name="gender"> 女

使用男女单选框的时候，需要设定成相同的name属性，才会由互斥的效果，而且默认情况下，只能点击原点，比较小不好点


	<input type="radio" name="gender" id="male"> <label for="male">男</label> 
	<input type="radio" name="gender" id="female"> <label for="female">女</label> 
//任何标签都可以存在id 是一个特殊的属性 每个html元素都有id 要求一个页面上id必须要唯一
//现在的效果就是，点击男或者女这两个字，就可以进行选择

复选框：

	<input type="checkbox" checked="checked"> 吃饭
	<input type="checkbox"> 睡觉
//使用checked可以默认选中

按钮：

<input type="button" value="这是按钮" onclick="alert('hello')">
//alert就是弹出一个对话框 value是显示按钮上的文字

提交按钮：


	<input type="submit" value="提交按钮" >

需要搭配form表单来使用

文件选择框：


	<input type="file">

select菜单

	<select>
		<option>北京</option>
		<option>上海</option>
		<option selected="selected">广东</option>
		<option>其他</option>
	</select>

//selected表示默认被选中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>请填写简历信息</h2>
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                性别
            </td>
            <td>
                <input type="radio" name="gender" id="male"> <label for="male"><img src="" alt=""> 男</label>
                <input type="radio" name="gender" id="female"><label for="female"><img src="" alt=""> 女</label>
            </td>
        </tr>
        <tr>
            <td>
                出生日期
            </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>                    <option>20</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>就读学校</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" id="frontend"><label for="frontend">前端开发</label>
                <input type="checkbox" id="backend"><label for="backend">后端开发</label>
                <input type="checkbox" id="qa"><label for="qa">测试开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea cols="50" rows="30"></textarea>
            </td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td>
                <textarea cols="50" rows="30"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="notice"><label for="notice">我已仔细阅读要求</label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3>请应聘者确认</h3>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能尽早去公司实习</li>
                    <li>能接受公司的加班</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简历</title>
</head>
<body>
    <h1>李四</h1>
    <h2>基本信息</h2>
    <img src="E:/ste/userdata/876496535/760/remote/774171/screenshots/20230106194020_1.jpg" alt="" width="800px" height="400px">
    <p>求职意向:Java开发工程师</p>
    <p>联系电话:110</p>
    <p>邮箱:10086@qq.com</p>
    <p><a href="#">我的github</a></p>
    <p><a href="#">我的博客</a></p>

    <h2>教育背景</h2>
    <ol>
        <li>1996-2002 xxx小学</li>
        <li>2002-2008 xxx中学</li>
        <li>2008-2012 xxx高中</li>
        <li>2012-2018 xxx大学</li>
    </ol>

    <h2>专业技能</h2>
    <ul>
        <li>熟练使用java基本语法,熟悉面向对象程序设计的基本思想</li>
        <li>熟悉mysql数据库</li>
        <li>熟悉常见数据结构</li>
        <li>熟悉多线程编程</li>
    </ul>
    
    <h2>我的项目</h2>
    <ol>
        <li>
            <h4>留言墙</h4>
            <p>开发时间:2002.11</p>
            <div>功能介绍</div>
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
        </li>
        <li>
            <h4>学习小帮手</h4>
            <p>开发时间:2007.2</p>
            <div>功能介绍</div>
            <ul>
                <li>支持自主学习</li>
                <li>支持监督学习</li>
            </ul>
        </li>
    </ol>

    <h2>个人评价</h2>
    <div>
        在校期间，学习成绩优秀，多次获得助学金
    </div>

</body>
</html>