目录
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
&; 等同于 &
";等同于 “