跳至主要內容

Html

HeChuangJun约 2932 字大约 10 分钟

Html介绍

  • 超文本标记语言（HyperText Markup Language）不是编程语言
  • 超文本指页面可以包含图片、链接等非文字内容，比文本强大，标记指使用标签的方法将内容包起来
  • 标签不区分大小写，建议小写，扩展名html或htm
  • HTML：网站的骨架、CSS：美化网站的骨架、Javascript：让页面具有动态效果

开发环境（调试、Emmet写法、PxCook）

安装vscode（安装打开网页插件open in browser，汉化菜单插件Chinese）、Chrome浏览器
调试工具：检查、调试代码，发现并解决代码问题
F12 或 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查，黄色表示属性有错误
4.png

缩放代码字号：放大/缩小:Ctr + 加/减号
向前、后缩进:Shift +Tab / Tab
快速换行Ctrl + Enter
快速生成骨架:在HTML文件中，!(英文) + Enter/Tab 键
添加/删除注释(包括css):Ctrl+/

Emmet写法：代码的简写方式，输入缩写VS Code会自动生成对应的代码

说明标签结构Emmet
类选择器<divclass="box"></div>标签名.类名
id选择器<divid="box"></div>标签名#id名
同级标签<div></div><p></p>div+p
父子级标签<div><p></p></div>div>p
多个相同标签<span>1</span><span>2</span><span>3</span>span*3
有内容的标签<div>内容</div>div{内容}
宽度widthw
宽度500pxwidth:500px;w500
背景色background-colorbgc
多个属性width:200px;height:100px;background-color:#fff;w200+h100+bgc
seo三大标签meta:kw/desc
favicon.icolink:favicon
引入csslink:css

PxCook：一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
开发面板（自动智能识别）、设计面板（手动测量尺寸和颜色）
用法：创建项目=>输入项目名称、类型Web=>单击按钮【创建项目】=>单击按钮【添加】，导入设计稿

获取元素的绝对位置const Position = document.getElement.getBoundingClientRect();
包含绝对位置的像素值Position.left,top,right,bottom

网页制作思路

从上到下，从左到右，从外到内，先整体再局部
先标签，再CSS美化
画盒子，调整盒子范围宽高背景色
调整盒子位置 → flex 布局、内外边距
控制图片、文字内容样式

Html文档结构

网站根目录是指存放网站的第一层文件夹，包含当前网站的所有素材
study文件夹
index.html:首页HTML文件
images文件夹：存放固定使用的图片素材，如:logo、样式修饰图等
uploads文件夹：存放非固定使用的图片素材，如:商品图、宣传图需要上传的图片
iconfont文件夹：字体图标素材
css文件夹：存放CSS文件(link标签引入)

  • base.css：基础公共样式，如：清除默认样式、设置网页基本样式
  • index.css：首页CSS样式
  • common.css：各个网页相同模块的重复样式，如：头部、底部
/* base.css 清除默认内外边距，如h1、p、ul、li */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;/* 保持盒子大小 */
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

body {
  font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB",
   "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}
/* 去掉超链接的下划线 */
a {
  color: #333;
  text-decoration: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

/* index.css版心 */
.wrapper {
  margin: 0 auto;
  width: 1200px;
}

<!DOCTYPE html>
<html  lang="en">
  <head><!--头标签，用于引入脚本、导入样式、提供元信息等，浏览器不显示-->
    <meta charset="UTF-8"><!--设置html页面编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO：搜索引擎优化，提升网站百度搜索排名
    竞价排名(充钱)、网页后缀index.html、标签语义化（使用合适的标签）h1,p等、网页头部SEO标签
    title：网页标题标签、description：网页描述、keywords：网页关键词 -->
    <title>网页标题</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- 先引入公共样式再引入首页样式覆盖默认的：先清除再设置 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- Favicon图标：网页图标，在浏览器标题栏，增加网站辨识度。
     favicon.ico图标一般存放到网站的根目录 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    体标签，网页主体，用来存放给用户看的信息，例如图片、文字
  </body>
</html>

Html语法

<!-- 属性名和属性值相同，简写为一个单词 -->

<h2>标题标签 新闻、文章标题、网页logo、网页区域名称等 
  h1-h6，n越大，字体越小，加粗加黑，独占一行，
与其他行有一定的间距，h1标签在一个网页中只能用一次，h2-h6没使用次数限制</h2>

<p title="鼠标悬停时提示">段落标签，新闻、文章段落、产品描述信息 独占一行，段落间有间隙</p>

<br/><!--单个换行，浏览器不识别代码中的Enter键换行-->

<hr size="5" noshade /> <!-- 水平线标签：size水平线的高度，单位像素、noshade没阴影、纯色 -->

<!-- 两个文本格式化标签在一行显示 -->
<strong>粗体</strong><b>粗体</b> <em>斜体<em><i>斜体</i>
<ins>下划线<ins><u>下划线</u> <del>删除线<del><s>删除线</s>

<img src="" width="" height="" alt="加载失败信息" title="鼠标悬停时提示"/>
<!--
width和height设置百分数填充满整个盒子或像素
src:图片的路径和名称url/#不跳转
绝对路径：从盘符出发=>E:/image.jpg 或 网页路径https://xxx.com/x.jpg
相对路径：从当前文件位置出发查找目标文件
同一级：直接写文件名称或者./文件名
上一级：../文件名、下一级：目录名称/文件名
-->

<a href="目标地址url，#空链接，不跳转只刷新" target="_blank新窗口/_self替换/frame的name属性"
 title="提示文本">超链接</a>

<audio src="音频URL" controls loop autoplay></audio>
<video src="视频URL" controls loop muted autoplay></video>
<!--
音频支持格式:MP3、Og8、Wav 视频支持格式:MP4、WebM、Ogg
controls显示音、视频控制面板
loop循环播放
muted静音播放（视频特有）
autoplay自动播放，为了提升用户体验，浏览器一般会禁用音频自动播放功能，支持在静音状态自动播放
-->

<!-- 列表：布局内容排列整齐的区域。
无序列表 ul标签只能包裹li标签（列表条目） li标签可以包裹任何内容 -->
<ul type="square/circle/disc(方块/空心圆/实心圆)">
	<li>CSDN</li>
	<li>百度</li>
</ul>

<!-- 有序列表 ol标签只能包裹li标签（列表条目） li标签可以包裹任何内容 -->
<ol start="4" reversed(降序排列) type="a/A/i/I/1">
	<li>CSDN</li>
	<li>百度</li>
</ol>

<!-- 定义列表：dl嵌套dt和dd，dl是定义列表，dt是标题，dd是描述/详情
dl里面只能包含dt和dd dt和dd里面可以包含任何内容 -->
<dl>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
</dl>

<!--table(加载太慢，了解)
方式1 table 嵌套 tr，tr 嵌套 td / th。border边框线
跨行合并，保留最上单元格，添加属性 rowspan
跨列合并，保留最左单元格，添加属性 colspan
-->
<table align="left/right/center" border="2px" cellspacing="0px" cellpadding="0px"
 width="500px" height="400px" bgcolor="blue">
  <tr>
    <th>1</th><!--表头单元格-->
    <th>2</th>
    <th>3</th>  
  </tr>
  <tr><!--行-->
    <td colspan="2">4</td><!--列 内容单元格-->
    <td rowspan="2">5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

<!-- 方式2 不能跨表格结构标签合并单元格
tbodies，所有的tbody，tbodies[i]，表示第几个tbody，rows[i]，第几行。length，长度
thead 表格头部 tbody 表格主体 tfoot 表格底部 -->
<table border="1px" width="500px" height="50px" align="center" >
	<thead>
		<tr>
		<th>编号</th>//表头，该内容默认居中、加粗
		<th>姓名</th>
		<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr >
		<td>1</td>
		<td>张三</td>
		<td>22</td>
		</tr>
		<tr >
		<td>2</td>
		<td>李四</td>
		<td>25</td>
		</tr>
	</tbody>
</table>


<!-- 表单标签：收集用户信息。场景：登录、注册页面、搜索框
action属性，请求路径，确定表单提交到服务器的地址（路径）
method属性，请求方式，默认get，提交的数据追加在请求路径上。不安全。
如/1.html?username=jack&password=1234.数据格式k/v，追加使用?拦截，
之后每一对数据使用&连接，url限制提交长度
post属性值，提交的数据不在请求路径上，不显示在地址栏上，安全，长度无限制
表单标签，无显示，要提交的数据必须放在表单标签内-->
<!-- name属性（必写）服务器通过name属性值获得表单提交的数据
value属性: input默认值,submit和reset为按钮显示数据,发给服务器的值 -->
<form action="#/${pageContext.request.contextPath}/虚拟路径" method="get/post" 
entype="multipart/form-data(包含上传控件)" name="regist">
	文本框 <input type="text" name="a" readonly disabled value="文本值" 
  placeholder="提示信息" maxlength="5"/><br/>
	密码框 <input type="password" name="pwd" required placeholder="提示信息" /><br/>
  单选框
	<input type="radio" name="sex" value="男"/>男
  <input type="radio" name="sex" value="女" checked />女<br/> <!-- checked（默选） -->
	复/多选框
	<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
	<input type="checkbox" name="hobby" value="跑步" checked />跑步<br/>
  上传文件
  <input type="file" name="file" multiple /><br/> <!-- 默认单选文件，multiple属性文件多选 -->
	下拉框：
  <!-- select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。 -->
	<select name="province" multiple size="3"><!-- size 可见选项数 multiple多选 -->
    <option>--请选择--</option>
    <option value="北京">北京</option>
    <option value="上海" selected>上海</option><!-- 默认显示第一项 selected默认勾选 -->
	</select><br/>
  文本域：
  <!-- 多行输入文本的表单控件 实际开发中，使用CSS设置文本域的尺寸 禁用右下角的拖拽功能 -->
	<textarea name="zwjs" cos="?（列数）" rows="?（行数）">默认提示文字</textarea><br/>
  <!-- label 标签 网页中，某个标签的说明文本。
  绑定文字和表单控件的关系，增大表单控件
  (文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等)的点击范围。
  写法一:label 标签只包裹内容，不包裹表单控件
  设置 label 标签的 for 属性值 和表单控件的 id 属性值相同 -->
  <input type="radio" id="man"><label for="man">男</label>
  <!-- 写法二：使用 label 标签包裹文字和表单控件，不需要属性 -->
  <label><input type="radio">女</label><br/>

  <!--提交按钮，点击后可以提交数据到后台(默认功能)
  重置按钮，点击后将表单控件恢复默认值
  普通按钮，没有功能，一般配合JavaScript 使用
  按钮需配合 form 标签（表单区域）才能实现对应的功能-->
	提交按钮：<input type="submit" value="注册（显示文本）"/><br/>
	普通按钮：<input type="button" value="zhuce"/><br/>
	重置按钮：<input type="reset" /><br/>
	
  <!--图形提交按钮通过src给按钮设置图片image-->
	隐藏字段:<input type="hidden" name="id" value="暗中传参" />
</form>

<!-- 无语义的布局标签 作用：布局网页（划分网页区域，摆放内容）-->
<div>div标签独占一行</div>
<span>span标签不换行</span>

<!-- 有语义的布局标签 header 网页头部 nav 网页导航 footer 网页底部
aside 网页侧边栏 section 网页区块 article 网页文章 -->

<!-- 字符实体：预留字符。空格&nbsp；小于&lt;大于&gt; lt、gt是less、greater than缩写 -->