目录
0x00 结构层 表现层 行为层
sublime快捷键
cmd+n 新建文件 然后 cmd+s 保存文件（保存到哪里，文件重命名）
html + tab 生成html框架
结构层HMTL：负责描绘出网页内容的架构
表现层CSS：负责如何显示结构层
行为层js：可以对结构层和表现层的内容随意的更改
0x01 head标签和body标签的作用
html 标签是文档的根元素
head标签的作用：
在里面可以编写文档的元数据（例如meta）、定义文档标题、引入css文件、引入js文件、编写css样式
body标签的作用:
body标签是文档的主体部分，编写网页显示的内容，编写js脚本
<!DOCTYPE html>//文档类型：html
<html>//在这个标记之内的文字都是html
<head>//头标签，类似于C中的头文件，用于包含html中的一些说明性的内容：例如标题，字符集
<meta cherset="utf-8">//表示该文档是utf-8编码
<!--引入css文件-->
<link rel="stylesheet" type="text/css" href="">
<!--引入js文件-->
<script type = 'text/javascript' src=""></script>
<!--编写css样式-->
<style type="text/css">
</style>
<title>你好，HTML</title>//浏览器上端的标题
</head>
<body>//正文
<h1>我的第一个标题</h1>//正文部分的标题
<p>我的第一个段落</p>
<!--编写js脚本-->
<scirpt type='text/javascript'>
</script>
</body>
</html>0x02 良好的习惯之代码注释
不同地方的注释是不一样的
例如：
在编写css的时候是要这样写 /*注释内容*/
在html中的注释：<!--注释内容-->
在js中的注释：//注释内容 、 /*注释内容*/
注释的快捷键：cmd+？对光标所在行进行注释
<!DOCTYPE html>
<html>
<head>
<!-- <title>这里是注释</title> -->
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript">
// 这里是是注释
</script>
<style type="text/css">
/*这里是注释*/
</style>
</head>
<body>
</body>
</html>0x03 非构造页面标签元素介绍
- head标签 放style标签，script标签，title标签，meta标签。
- meta标签 页面元素信息标签
- script标签：
- 写js的标签或者引入js文件的标签，利用src可引入外部js脚本
- script标签可以放在head标签中，也可以放在body标签（建议）中
- link标签,引入外部样式表
- title标签，页面标题标签
- style标签，写嵌入样式表的标签
0x04 构造页面必备的HTML标签元素介绍（一）：
1.div标签:（出现频率最高的标签）
在网页布局过程中可以把你认为捆绑在一起的东西装在一个<div></div>里面，div充当的是一个容器的角色
2.p标签：
用来显示文章和段落
3.br标签：用来换行
4.strong标签：用粗体显示
5.em标签：用斜体显示
6.span标签:span标签是没有语义的，它的作用就是为了设置单独的样式用的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<!-- 例如：我只需要让hello world显示为红色，其他文字颜色不变。那么就需要用一个span来单独将hello world包起来，对它进行样式的设置 -->
<span style="color:red">hello world</span>
<p>我是一个<strong>p标签</strong>，我被div标签包着，它是一个<em>容器</em></p>
<p>段落标签2</p>
</div>
</body>
</html>0x05 构造页面必备的HTML标签元素介绍(二):
1.ul li标签：无序列表
快捷键：创建3个li标签 li*3 + tab
2.ol li标签：有序列表
3.hx 标签：hx分别可以为h1 h2 h3 h4 h5 h6 字体大小从大到小
一般标题用h1 副标题用h2
4.hr 标签：分割线(很少用)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 无序列表 -->
<ul>
<li>新闻列表1</li>
<!-- 分隔线标签 -->
<hr>
<li>新闻列表2</li>
<li>新闻列表3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>新闻列表1</li>
<li>新闻列表2</li>
<li>新闻列表3</li>
</ol>
<!-- hx标签 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>0x06 构造页面必备的html标签元素介绍（三）：
1.a标签：实现超链接的跳转，只要有链接的地方都可以使用该标签，此外a标签还可以设置title和target等属性
<a href="目标网站" title="鼠标滑过时显示的文本" target="_blank">click here</a>
如果没有设置target属性，那么点击超链接后，当前页面会直接跳转为目标网站
如果设置了target='_blank'，那么点击超链接后，将会新生成一个页面，然后在新页面中打开目标网站
2.img标签:用来插入图片
面试可能会问alt和title的区别
<img src="图片地址" alt="下载失败时的替换文本" title = "鼠标滑过显示的文本">
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="html标签介绍2.html" title ="回到上一页" target='_blank'>click here</a>
<img src="1.jpg" title="图片1" alt="1.jpg下载失败">
</body>
</html>常用标签
超链接标签
<a href="http：//www.baidu.com/">百度</a>
图片标签
<img src="相对路径">
或者
<img src="相对路径” height="100px" width="100px">
0x07 构造页面必备的html标签元素介绍(四）：
1.input标签 文本输入框:常见的type有text（输入框），radio，checkbox，button，submit,file,password
2.textarea标签 文本输入域:用户需要在表单中输入大段文字时，需要用到
3.select option 标签 下拉选择框，option标签里面设置select='selected' 即为默认选中
4.label标签:
label标签的作用：用label标签将其他标签（例如input标签）包起来，这样当用户点击label标签内的文本时，浏览器会自动将焦点转到和文字相关的表单控件上。
使用方式如下两种：
第一种：id绑定法
<label for="控件id名称">
例如：<label for="male">男</label>
<input type='radio' name ='sex' id='male'/>
第二种：包裹法
<label>男<input type='radio' name='sex' id='male'/> </label>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- input标签 文本输入框:常见的type有text，radio，checkbox，button，submit,file,password -->
<!-- 输入框 -->
<input type="text" value='我是默认值' placeholder="我是提示内容" name="">
<!-- 当鼠标点击输入框输入是，提示内容自动消失 -->
<!-- 单选按钮 -->
<input type="radio" name="sex" value="man">男的
<input type="radio" name="sex" value='woman'>女的
<!-- 复选框 -->
<input type="checkbox" name="">复选框
<!-- 按钮button、submit -->
<input type="button" value="我是按钮" name="">
<input type="submit" value="提交" name="">
<!-- 文件上传 -->
<input type="file" name="">
<!-- 密码框 -->
<input type="password" placeholder="我是密码框，你看不到我输入的内容" name="">
<!-- 文本输入域 -->
<div>
文本输入域
<!--默认文本输入域是可以拖动改变size的。我们可以将resize属性设置的none禁止拖动 -->
<textarea style="resize:none">
</textarea>
</div>
<!-- 下拉选择框 -->
下拉选择框
<select>
<option>选项1</option>
<option>选项2</option>
<option select="selected">选项3</option>
</select>
<!-- label标签的作用 -->
<div>
<!-- 第一种使用方式 -->
<label for="male">男</label>
<input type='radio' name ='sex' id='male'/>
<label for='female'>女</label>
<input type="radio" name="sex" id='female'>
<!-- 第二种使用方式 -->
<label>同意<input type="radio" name="isagree" value='true'></label>
<label>不同意<input type="radio" name="isagree" value='false'></label>
</div>
</body>
</html>0x08 页面常见元素之html表格
table标签:用来定义HTML表格，可以用作展示数据,border属性可以为表格设置边框
tr标签：定义HTML表格中的一行单元格
th标签:表示HTML表格的表头部分，该标签中的内容会以粗体显示
td标签:表示table标签的单元格
thead标签:定义了一组HTML表格的头,该标签无论写在什么位置，显示表格时都会显示在最上面。
tbody标签:定义了一组HTML表格的主体部分，
tfoot标签：定义了一组HTML表格的尾。该标签无论写在什么位置，显示表格时都会显示在最下面。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border='1'>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tfoot>
<tr>
<td>姓名统计</td>
<td>年龄统计</td>
<td>身高统计</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>21</td>
<td>168</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>175</td>
</tr>
</tbody>
</table>
</body>
</html>
<table> //表示表格
<tr><th>表头1</th><th>表头2</th></tr>
<tr><td>单元格1</td><td>单元格2</td></tr>
</table>
/*
<tr> table row 行
<th> table head 表头
<td> table data 单元格
*/<DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1"> <!--边框宽度为1-->
<tr>
colspan 规定了单元格可以横跨的列数
rowspan 规定了单元格可以跨的行数
<th>部门</th>
<th>姓名</th>
<th>性别</th>
<th>工资</th>
</tr>
<tr>
<td rowspan="4">开发组</td>
<td>李强</td>
<td>男</td>
<td>1000000</td>
</tr>
<tr>
<td>大黑客</td>
<td>男</td>
<td>1000000</td>
</tr>
<tr>
<td>大美女</td>
<td>女</td>
<td>1000</td>
</tr>
<tr>
<td colspan="2">工资合计</td>
<td>1000</td>
</tr>
</table>
</body>
</html>实体 （转义字符）
< 等同于<
> 等同于 >
©； 等同于圈c
&； 等同于 &
"；等同于 “
扫一扫
2230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
