写在前边
++##关于插件++
①简体中文
②open-in-browser:自动在浏览器生成html页面;
③Auto Rename Tag:自动匹配标签;
④Live server:实现页面的实时刷新;并且可以将生成的网页的url随机生成,而不是自己的盘符;
++##关于快捷键:++
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:定义音频
<br>用于换行;
<hr/>水平分界线;
文本格式标记
常用的字符实体:
空格-- 全角空格--  <小于号--< >大于号--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 属性,不仅可以单击单选框标识选择该选项,还可以单击文字"男/女"来选择单选框;
html
<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标签用于生成列表项;
html
<form>
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
</form>
按钮
可以用button标签生成一个按钮,其内容可以是文本或图像,而 input 元素创建的按钮内容只能是文本。
<button><img src="baidu.png"></button>
文本域
<textarea cols="50" rows="10">文本域中的内容</textarea>