HTML 语法学习

HTML
笔记
发布日期:   2022-04-08
更新日期:   2022-04-08
文章字数:   2.8k
阅读时长:   12 分
阅读次数:  

跟着pink老师的教程做的笔记

HTML 5

1.网页的相关概念

什么是网页

网站是网页的集合。
网页是构成网站的基本元素，通常以.htm或.htm后缀结尾，俗称HTML文件。

什么是HTML

HTML指超文本标记语言，是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。

超文本：
1.超越文本限制
2.超级链接文本

网页的形成

网页是由网页元素组成，利用HTML标签描述，通过浏览器解析出来。

2.常用浏览器及其内核（渲染引擎）

火狐（Firefox）（Gecko），谷歌(Chrome)（Blink），Safair（Wenkit），Opera（Blink），IE（Trident）

3.Web标准

Web标准是由W3C组织和其他组织指定的一系列标准集合

web标准的构成

结构（网页元素）（HTML)
表现（外观）（CSS）
行为（交互）（JS）

4. 开发工具

DW VScode（！+Tab生成页面骨架结构） Hbuilder webstorm

VScode工具生成骨架标签新增代码

5.HTML标签

5.1语法规范

基本语法规范

标签类型

{
	<html>
		</br> (单标签)
	</html> （双标签）
}

基本语法结构

{
	<html lang = "zh-CN">
		<head>
            <meta charset = "utf-8"
			<title>My first page.</title>
		</head>
		<body>
			Hellow world!
		<body>
	</html>
}
<!DOCTYPE>标签

￥文档类型的声明标签（非HTML标签*，作用是告诉浏览器使用哪种HtML版本来显示网页

lang语言种类

定义当前文档显示的语言
en定义为英语
zh-CN定义语言为中文

字符集

字符集是多个字符的集合。一边计算机能够识别和储存文字
在head标签内，用meta标签的charset属性来归档html文件应当使用哪种字符编码
utf-8：万国码

5.2常用标签

标题标签

/

-

文字加粗，字号依次变大，独占一行。

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

段落标签和换行标签

/

定义段落 把文档跟程若干段落,会根据窗口大小自动换行，换行行距较大
/
强制换行 单标签，换行行距较小

文本格式化标签

突出重要性

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

无语义标签

/

（division 分割分区）和 （跨度跨距）是没有语义的，他们是作为盒子来装内容的

<div>
	自己独占一行（大盒子）
</div>
<span>
	一行可以放多个span，（小盒子）
</span>

图像标签和路径

<img src = "图像的URL" alt = "替换文本" title = "提示文本" />
src：img标签的必须属性，用于指定图像文件的路径和文件名
alt: 图片无法显示时的替换文本
title：鼠标放在图像上的提示文本
width：宽度
heigt： 高度
border：边框粗细
相对路径和绝对路径

相对路径：引用文件所在的位置（图片相对于HTML页面的位置）

<img srd = "图像.jpg"> //同级路径
<img srd = "images/图像.jpg"> //下一级路径 /
<img std = "../图像.gif"> //上一级路径 ../

绝对路径：文件的绝对位置，直接到达目标位置，通常从盘符开始。/ 网络上的绝对地址

超链接标签

/标签用于定义超链接

<a herf = "跳转目标" target = "目标敞口的弹出方式">文本或图像</a>
herf:链接目标的地址（必须属性）
targert：（目标） 用于指定链接对象的打开方式，其中_self为默认值(当前窗口打开)，—_blank为新窗口中打开方式
<a herf = "http://www.qq.com" target = "_blank"></a> //外部链接
<a herf = "内部网页文件.html" target = "_blank"></a>//内部链接：打开同一文件夹下的html文件
<a herf = "#" target = "_blank"></a> //空连接
<a herf = "img.zip"></a> //下载链接： 链接地址是文件 .exe或者是zip等压缩包形式
<a herf = "http://www.baidu.com" target = "_blank"><img src = "img.jpg"/></a> //网页元素链接：在网页中加入各种网页元素，如文本，表格，图像，音频，视频等
//锚点链接：点击链接可以快速定位到页面中的某个位置
<a herf = "#name">title</a> //在链接文本的herf属性中，设置属性值为#名字的形式
<h1 id = "name">title<h1>  //找到目标位置标签，里面添加一个id属性 = 刚才的名字

注释标签和特殊字符

<!---注释语句--->
快捷键：ctrl+/
&nbsp //一个空格
&gt //大于号（greater than）
&lt //小于号 （less than）

表格标签

<table align = "center" border = "1px" cellpadding = "2px" cellspaceing = "0" width = "500px" heigth = "300px"> //定义表格
	<thead> //（表格结构标签）定义表格头部，必须放在<table>标签里，内部必须由<tr>标签
		<tr> //定义行，必须嵌套在<table>标签里
			<th>姓名</th> //（table head）表头单元格 加粗居中
			<th>年龄</th>
		<tr>
	</thead>
	<tbody> //（表格结构标签）定义表格主题，主要用来放内容
		<tr>
			<td>白昀</td> //定义列，必须嵌套在<tr>标签里
			<td>18</td>
		</tr>
	</tbody>
</table>
	align:对齐方式 left right center
	border:边框
	cellpadding：内容和边框距离（字和单元格边框之间的距离）
	cellspaceing: 单元格之间的距离
合并单元格

1.确定跨行合并（rowspan）还是跨列合并（colspan）
2.找到目标单元格，写上合并方式
3.删除多余的单元格

<html>
	<head>
       </head>
       <body>
       	<table>
       		<tr>
       			<td></td>
       			<td colspan = "2"></td> //跨列合并
       		</tr>
       		<tr>
       			<td rowsoan = "2"></td> //跨行合并
       			<td></td>
       		</tr>
       		<tr> 
       			<td></td>
       			<td></td> 
       			<td></td>
       		</tr>
       	</table>
       </body>
</html>

列表标签

无序列表
<ul> //定义列表标签，只能包括<li>标签
	<li>今天不做咸鱼</li> //相当于一个容器，可以包括任何标签
	<li>明天不做咸鱼</li>
	<li>后天不做咸鱼</li>
</ul>
<!---样例--->
·今天不做咸鱼
·明天不做咸鱼
·后天不做咸鱼
有序列表
	<ol> //定义有序列表，只能包括<li>标签
		<li>今天不做咸鱼</li>
		<li>明天不做咸鱼</li>
		<li>后天不做咸鱼</li>
	</ol>
	<!---样例--->
	1.今天不做咸鱼
	2.明天不做咸鱼
	3.后天不做咸鱼

##### 自定义列表
​```html
	<dl> //定义描述列表,与<dt><dd>标签一起使用
		<dt>BY_CLOUD</dt> //定义项目/名字
		<dd>qq：1625279256</dd> //描述项目/名字
		<dd>Wechat：yun-0810</dd>
	</dl>

表单标签

#####type表单元素

完整的表单标签由表单域，表单控件（也成为表单元素），和提示信息3个部分组成

<html>
	<head>
	</head>
	<body>
		<form action = "url地址" method = "post(提交方式)" name = "name"> //定义表单域，以实现用户信息的手机和传递，会把他范围内的表单元素信息传递给服务器
			<input type = "属性值"/> //单标签，收集用户信息，根据不同的type属性值，输入字段拥有很多种形式（文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）					用户名：<input type = "text"/ name = "username" value = ”请输入用户名> <br/> //文本框，用户可以在里面输入任何内容，value:鼠标放在*文本框*上显示的内容
			密码： <input type = "password" name = "pwd" value= “请输入密码 maxlength = "8"> <br/> //定义*密码*字段，该字段中的字符被掩码,maxlength:规定可输入字符的最大长度
			性别： 男<input type = "radio" name = "sex" value = "男" chacked = "chacked">女<input type = "radio" name = "sex" value = "女"> //radio *单选按钮*，可以实现多选一,其name属性必须相同，value显示不出来，chacked初始化只能单选
			爱好： 吃饭<inpit type = "chackbox" name = "hobby" value = "吃饭" chacked = "chacked">睡觉<input type = "chackbox" name = "hobby" value = "睡觉" chacked = "chacked">打豆豆<inpit type = "chackbox" name = "hobby" value = "打豆豆"><br/> //chackbox：*复选框*，可以实现多选,name：属性必须相同,value：显示不出来,chacked:初始化可以多选
			<input type = "submit" value = "提交"> //提交按钮：更换提交字样可以改变value，可以把表单域form里面的表单元素提交给后台服务器
			<input type = "reset" value = "重置"> //重置按钮：还原表单元素初始的默认状态
			<input type = "button" value = "获取短信验证码"> //普通按钮：定义可点击按钮，不提交数据，一般结合js搭配使用
		上传头像：<input type = "file" value = ""> //文件域：上传文件使用
		</form>
	</body>
</html>
lable标签

标签为input元素定义标注（标签）
用于绑定一个表单元素，当点击,标签内的文本时，浏览器会自动将焦点（光标）转到或者选择器对应的表单元素上，用来增加用户体验。
标签的for属性应当与相关元素的id属性相同。

<html>
	<head>
	</head>
	<body>
		<lable for = "text">用户名</lable><input type = "text" id = "text"/> //<lable>标签：for后必须与id的相同
		<input type = "radio",id = "nan"><lable for = "nan">男</lable>
		<input type = "radio",id = "nv"><lable for = "nv">女</lable>
	</body>
</html>
select表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用select定义下拉列表

<html>
	<head>
	</head>
	<body>
		<form>
			籍贯：
				<select> //定义下拉表单
					<option selected = "selected">北京</option> //选项1 selectde：默认选项
					<option>上海</option>
					<option>广州</option>
				</select>
		</form>
	</body>
</html>
textarea（文本域）表单元素

用于定义多行文本输入的控件，常见于评论，留言板。

<html>
	<head>
	</head>
	<body>
		<form>
			留言：
			<textarea cols = "50" rows = "5"> //定义文本域，cols:每行可以显示多少个字符，rows：可以显示多少行
				这里输入默认内容
			</textarea>
		</form>
	</body>
</html>

6.查阅文档

w3c:http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN
ZEAL

文章作者: 白昀
文章链接: http://baicloud.github.io/2022/04/08/html-yu-fa-xue-xi/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 白昀 !
HTML
赏
评论
  目录
.js">