点进HTML初步了解
写在前边
##关于插件
①简体中文
②open-in-browser：自动在浏览器生成html页面；
③Auto Rename Tag：自动匹配标签；
④Live server：实现页面的实时刷新；
##关于快捷键：
Ctrl + '/' 用来注释一个代码段；
注释性质的语言可以用 <!-- 和 --> 框住；
##HTML文件结构：
html页面的固定结构在VS code中输入！+ TAB或者! + 回车 就可以得到。
①<!DOCTYPE html>表示文档类型，浏览器将按照html5来解析网页文件。
②<html lang="en"> </html>表示HTML的文档起止位置，浏览器与搜索引擎解析将按照lang属性
声明的语言来解析。
③meta标签的charset属性用于声明网页字符集的编码方式。 <meta charset="UTF-8">
##HTML语法
标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构；
元素：HTML中标记和标记之间的内容组合；
元素有行内元素、块状元素、行内块元素三种；【利用CSS中的display属性可以相互转换】
行内元素：不可设置行高、上下内外边距；
块级元素：独占一行，可以设置宽高、内外边距；
行内块元素：可以设置宽高、内外边距；可以与其他行内元素、内联元素共处一行；
常见标记
结构标记：html、head、body、section、article、aside、hgroup、header、footer、nav;
【section元素表示页面的一个内容区块，比如章节、页眉页脚、或页面其他部分】
【article元素表示页面一块和上下文不相关的独立文章，例如本博客文章】
【aside元素表示article元素的内容以外的】
【header元素表示页面中的一个内容区域或整个页面的标题】
【hgroup元素表示整个页面或页面中一个内容区块的标题进行组合】
【footer元素表示整个页面或页面中一个内容区块的脚注】
【nav元素表示页面中导航链接的部分】
头部标记：title、meta、link、stytle
文本标记：strong、em
段落及标题标记：p、h1-h6、br
列表标记：ul、ol、li、dl、dt、dd
超链接标记：a、map、area
图像及媒体元素标记：img、embed、object
表格标记：table、tr、td、thead、tbody、tfoot
表单标记：form、input、textarea、select、option、label
容器标记：div、span
video：定义视频
autio：定义音频
文本格式标记
常用的字符实体：
空格-- 全角空格--  <小于号--< >大于号--gt “引号--quot
&符号--&
<pre>：预格式标记
列表标记
无序列表<ul> 其列表项<li> 列表项可以是图片or文字；
有序列表<ol> 其列表项<li>
自定义列表<dl> 列表项<dt> 列表项的描述<dd>
超链接标记【行内元素】
<a>标签定义超链接；
href 属性： 规定链接的目的地；
<a href="跳转的目标位置">文字或者图片</a>
跳转的目的地有：
①外部网站，即，<a href="http://www/w3school.com.cn/">学习网站</a>
②本网站的另外一个页面，同一📂下有front.html和rear.html网页，在front.html点击文字"前端与后端"，跳转到rear.html，即，
<a href="rear.html">前端与后端</a>
③跳转特定位置，即
<article id="top">...</article>
<p><a href="#top">返回顶部</a></p>
④虚拟超链接，即，
<a href="#">学习网站</a>
学习网站字样下会有下划线，但是点击无跳转；
超链接属性target
_self：当前浏览上下文。（默认）_blank：通常是一个新选项卡，但用户可以将浏览器配置为打开新窗口。_parent：当前浏览上下文的父浏览上下文。如果没有父级，则行为为_self_top：最顶层的浏览上下文（作为当前上下文的祖先的“最高”上下文）。如果没有上级，则行为为_self
超链接属性title
title属性是全局属性，鼠标移在超链接上的时候显示的一段文字提示。
图像
<img src="图片位置+文件名+扩展名" alt="替换文字"/>
//替换文字是图片无法显示的时候显示的文字
title属性是全局属性，鼠标移在图像上显示的一段文字提示；
align属性是对齐属性；
width、height是宽和高属性；
表格
表格table由标题caption、表头thead、表体tbody、表尾tfoot构成；
表格按照行 tr 存储； 表格单元格分为表头单元格 th 和数据单元格 td;
默认表头单元格加粗显示；
border属性
表格默认无边框，若显示边框，可用border;
colspan属性和rowspan属性
colspan合并列，横向合并；
rowspan合并行，纵向合并；
表单
<form name="表单名称" method="get|post" action="后续处理页面">
表单元素
</form>
method属性：发送表单数据的方法，取值get用于安全性要求较低，传输数据较少的情况；
取值post用于安全要求较高，传输数据较多的情况；
action属性：向何处发送表单，处理表单数据的后端页面；
表单元素
文本框&密码框
<input type="text|password" name="名称" value="内容" placeholder="输入提示"/>
//type属性：取值是“text”时为文本框，取值是“password”是密码框；
//value属性：文本框中的文本；
//placeholder属性：用于显示在文本框中的输入提示；
提交按钮&重置按钮
<input type="submit|reset" name= "名称" value="内部文本"/>
//sunmit-提交按钮；reset-重置按钮；
value属性：按钮中的文字；
单选框& 复选框
<input type="radio|checkbox" name="名称" value="值" checked="checked"/>
//radio-单选框 checkbox-复选框
//name：一组单选框的name属性需要取值相同；
//value：按钮内的文字；
//checked：当设置为“chec
ked”时，该选项默认为选中状态；
标签
标签 label 通常包裹 input 元素，当用户在 label 元素内单击文本，被包裹的表单 元素会被触发单击事件。设置 label 的 for 属性为对应单选框的 id 属性，不仅可以单击单选框标识选择该选项，还可以单击文字“男/女”来选择单选框；
<form>
性别:
<label for="boy">男
<input type="radio" id="boy" name="gender" checked="checked"/>
</label>
<label for="girl">女
<input type="radio" id="girl" name="gender"/>
</label>
</form>
下拉列表
select标签用于生成下拉列表，option标签用于生成列表项；
<form>
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
</form>按钮
可以用button标签生成一个按钮，其内容可以是文本或图像，而 input 元素创建的按钮内容只能是文本。
<button><img src="baidu.png"></button>
文本域
<textarea cols="50" rows="10">文本域中的内容</textarea>
原文地址：https://blog.csdn.net/weixin_73223235/article/details/142392141
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！