【自学笔记】前端01_html5+css3学习01_基础认知

作个人复习查阅使用

一、基础认知

1.标签

1.1文字排版标签

对文本内容排版，例如设置标题、分段、换行、分割线。

• 标题

<h1>最大标题</h1>
<h6>共6级</h6>

• 段落

<p>隔开新的段落</p>

• 换行

<br>单标签。文本换行（但不会分隔段落）

• 水平线

<hr>单标签。一条独占一行分割线

1.2文本样式标签

对文本样式修改，例如加粗、下划线、倾斜、删除线 （可以表示商品已出售）。

• 加粗

<b>简单写法</b>
<strong>强调写法</strong>

• 下划线

<u>简单写法</u>
<ins>强调写法</ins>

• 倾斜

<i>简单写法</i>
<em>强调写法</em>

• 水平线

<s>简单写法</s>
<del>强调写法</del>

以上简单写法与强调写法的实现效果相同，简单写法更普遍使用，在特别重要的场景可以使用强调写法，有利于搜索引擎（SEO）语义解析。

1.3媒体标签

可以插入媒体文件例如图片、音频、视频、超链接。

• 路径
  找到所需文件的位置的“导航”。网站开发中有时需要预留一个路径，路径还不明确时用"#"代替

 绝对路径：1.目录路径："D:/路径:/图片.jpg"使用绝对路径在不同设备运行时会找不到文件
 		  2.完整的网址："https://www.baidu.cn/picture/new.gif"
 相对路径：开发中全部使用相对路径，从当前文件夹为根寻找目标文件
 		1.同级目录："同级目录文件"或 "./同级目录下的文件"
 		2.子级目录："子文件夹/文件"或"./子文件夹/文件"
 		3.上级目录："../父文件夹/文件"，同样方式可以找上级文件夹中包含的另一个文件夹下的文件

• 图片

<img src= "图片路径" alt = "" title = "">
src：图片路径可以引用本地图片或网络图片
alt：图片加载失败（不存在）时会显示的文本，图片成功加载时不会显示
title：鼠标悬停图片时提示文本
width,height:设置图片宽高，只设置一个则会等比缩放，图片不变形；两者都设置可以改变图片比例

• 音频

<audio src = "音频路径" ></audio>
常见属性：
	1.controls：必加，显示播放控制器
	2.autoplay：自动播放（部分浏览器不支持）
	3.loop：循环播放

• 视频

<video src = "视频路径"></video>
常见属性：
	1.controls：必加，显示播放控制器
	2.autoplay：自动播放（部分浏览器不支持）
	3.loop：循环播放

• 超链接

<a href = "链接路径">触发文字</a>
	可跳转网址"https://www.***.com"或相对路径下网页"./网页.html"
	在未确定跳转页面时可以预留"#"
常见属性：
	target：
		_self:默认值，在当前页跳转
		_blank:新页跳转

1.4列表标签

• 无序列表

ul:表示无序列表整体，包裹li标签
li:表示无序列表里的一项，可以嵌套ul
例如
<ul>
	<li>第一层
		<ul>
			<li>第二层第一项</li>
			<li>第二层第二项</li>
		</ul>
	</li>
</ul>

• 有序列表

有序列表和无序列表非常相似，只是"ul"变成"ol"
<ol>
	<li></li>
</ol>

• 自定义列表
  在网页底部功能导航栏通常使用自定义列表，可以类表格的形式展示多列列表集合

dl:表示自定义列表整体，包裹dt/dd标签
dt:表示自定义列表的一个主题
dd:表示自定义列表里所属主题下的一项，默认会比主题缩进两格
<dl>
	<dt>地区</dt>
	<dd>北京</dd>
	<dd>上海</dd>
	<dd>重庆</dd>
	
	<dt>国家</dt>
	<dd>中国</dd>
	<dd>印度</dd>
</dl>

1.5表格标签

• 表格基本标签

table：包含整个表格体，可以嵌套别的表格
tr：表格的一行
th：表头标题，默认文本加粗（可以不要表头）
td：表格的一格
<table border = "2">
    <tr>
        <th>语文</th><th>英语</th><th>数学</th>
    </tr>
	<tr>
		<td>98</td><td>95</td><td>100</td>
	</tr>
</table>

• 表格相关属性

常见表格属性：
border:边框宽度
width、height:宽高
实际开发时一般把样式写入CSS文件中

• 表格标题和单元格

caption：大标题，默认置顶居中显示
th:小标题，放在tr中

• 表格结构标签
  表格中一般分为头部身体尾部三组。

<thead>一般放<caption><th>大小标题</thead>
<tbody>表主体</tbody>
<tfoot></tfoot>

• 表格合并
  上下合并：保留最上单元格，删除其他；
  左右合并：保留最左单元格，删除其他；

给保留的单元格设置一个属性:
rowspan：合并数量  将往下共n个单元格合并
colspan：合并数量  将往右共n个单元格合并
如<td rowspan = "3">将3个单元格合并</td>
<!--只有相同标签的单元格才能合并，不能跨thead、tbody、tfoot合并-->

1.6表单标签

<form action="" method="">
	表单标签中间是表单项
</form>

action:表单提交数据的url地址，默认是当前页面
method:get：表单数据拼接在url后面，大小有限易泄密
method:post：表单数据在请求体中，大小不限
通过表单来对前端收集的数据进行处理

1.7表单标签-表单项

• input输入器
  登录、注册、搜索等需要输入内容的场景常用

标签名<input type="" value=""></input>
通过设置不同的type值实现文本框、选择框、按钮等效果

type属性值	说明
text	单行文本框
password	密码输入框，默认把输入显示为密文 ****
radio	单选框，用于多选一
checkbox	多选框，用于多选多
button	普通按钮，默认无效果，可以配合js添加功能
submit	提交按钮，用于提交
reset	重置按钮，用于重置
file	选择文件，用于上传文件

1.输入框
	<input type = "text/password"></input>
	可附加属性placeholder ="文本"设置未输入内容时显示的提示文本
2.选择框
	<input type = "checkbox/radio"></input>
	可附加属性checked 设置默认选中
	通过设置相同的name属性将radio/checkbox绑定为一组，其中radio单选框同一组下只能选中一个
3.文件选择
	<input type = "file"></input>
	可附加属性multiple使文件可多选
4.按钮
	<input type = "submit/reset"></input>
	用于提交和重置整个输入表单，处于同一form表单域下时submit/reset按钮才会生效

• button按钮

除了<input type = "submit/reset/button"></input>形式能设置按钮
button本身也是标签<button type = "">可以在button标签中包裹其他的内容：图片文字等</button>

type属性值	说明
button	普通按钮，默认无效果，可以配合js添加功能
submit	提交按钮，用于提交
reset	重置按钮，用于重置

• select下拉菜单
  下拉选择场景如地址

<select>
	<option>未给option添加selected属性时，默认选中首个</option>
	<option>第二栏</option>
	<option selected>默认选中</option>
</select>

• textarea文本域
  多行文本输入场景如评论

属性值	说明
placeholder	未输入内容时显示的提示文本
rowspan	文本域内显示的可见行数
colspan	文本域内显示的可见宽度

<textarea colspan ="200" placeholder="请友好评论，文明用语！"></textarea>

• label标签
  用于绑定内容与表单标签，例如可以把图片绑定到按钮上，点击图片等效于点击按钮

<label for=""></label>使用方法
方法1.把要绑定的内容包裹在label标签中，设置for属性值与要绑定的表单标签的id值一致
<input type="button" id="btn" value="按钮">
<label for="btn">
    <input type="text">包裹文本
</label>
方法2.用lable标签包裹要绑定的内容和表单标签，移除for属性

<label>
	<input type="text">包裹文本
	<input type="button" value="按钮">
</label>

1.8语义化标签

• 没有语义的标签
  div和span标签没有语义，非常常用，将其他标签包裹在其中有利于布局和添加样式

<div></div>：默认占屏幕一行，高度自适应，可以设置大小
<span></span>：一行多个，大小自适应，不能设置width,height

• 有语义标签（了解即可）
  通过布局标签标识内容所属区块，有利于网页放大缩小自动适配

1.9符号实体标签

在网页中显示特殊字符(属于HTML语言的字符如引号大小于号等)时，使用实体字符代替
格式：&英文;（不能缺少英文分号）

例如<p>2<3</p>不会显示“2<3”而是报错
正确写法<p>2 &lt; 3</p>

• 常见的字符实体

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
"	双引号	&quot
’	单引号	&apos(IE不支持)

2.CSS基础

CSS（Cascading Style Sheets）层叠样式表，用于美化网页；将html比作网页骨架，CSS就是皮肤，javascript则是赋予生命。

2.1基础认知

2.1.1css语法规则

CSS写在style标签中，style标签一般位于head标签里面，title标签下面

<title>Document</title>
<style>
p{
	color:red;
}
</style>
p:选择器，包含css样式属性
color:red属于css属性，属性名:属性值;
/*css注释*/

2.1.2css引入方式

• 内嵌式
  css写在style标签中，注意，style标签可以写在任意位置，但通常约定写在head标签中
• 外联式
  css写在单独的.css文件中，通过link标签页面引入

<link rel = "stylesheet" herf =  "自定义文件.css"></link>
rel="stylesheet"：表示引入的文件与页面的关系“关系：样式表”

• 行内式
  css写在标签的style属性中，配合js使用

<div style = "color:red;">行内式直接用标签的style属性修改</div>

引入方式	书写位置	作用范围	使用场景
内嵌式	style标签中	当前页面	小案例
外联式	单独css中，link标签引入	多个页面	实际项目
行内式	标签的style属性中	当前标签	配合js使用

2.2选择器

通过选择器找到要改变样式的标签的位置，设置样式。

选择器名称	结构	作用	注意点
标签选择器	标签名{css属性：属性值}	匹配全部标签名一致的标签	匹配全部同名标签，不管嵌套多深
类选择器	. 类名{css属性：属性值}	匹配全部类名一致的标签	1.所有标签都有class属性，属性值即为类名；2.类名由数字、字母、中/下划线组成，但不能数字中划线开头；3.class="类名"可以写多个类名，一个类选择器可以选中多个同类名标签
id选择器	#id{css属性：属性值}	匹配唯一id一致的标签	1.所有标签都有id属性；2.id有唯一性；3.一个id选择器只能选择一个id
通配符选择器	*{css属性名：属性值}	匹配页面中所有标签	几乎不会使用，可能用于去除默认属性如margin,padding

注意 一个标签被设置了重复的属性，样式会层叠（更新），优先渲染最新设置的属性。

2.3字体与文本样式

2.3.1 字体样式

#id{
font-size:数字+px
}

样式	属性名	属性值	注意
字体大小	font-size	数字+px	不设置单位px无效
字体粗细	font-weight	关键字：normal（正常）bold（粗体）纯数字：400（正常）700（粗体）
字体倾斜	font-style	normal（默认）italic（倾斜）
字体系列	font-family	具体字体名如“微软雅黑”或字体系列	尽量不用避免兼容异常

复合属性 如果需要同时设置font的多个属性可以直接用font属性后加多个属性值

p{
	font:italic 700 66px 宋体;
	font-size:normal;如果同时需要单独设置第二种样式，可以在下面另写一个
}

2.3.2 文本样式

• 文本缩进：

text-indent 取值：数字+px或数字+em（推荐）em表示当前标签的font-size大小

p{
	text-indent:2em;//表示缩进两格
}

• 文本水平对齐方式：

text-align 属性值：left（默认），center，right；
text-align（水平对齐方式）属性同时适用于
1.文本标签；2.span，a标签；3.input,image标签；

• 文本修饰：

text-decoration 属性值：
underline下划线（常用）
line-through删除线（不常用）
overline上划线（不常用）
none无装饰线（常用）开发中会用text-decoration:none;清除a标签默认的下划线

2.3.3 行高
控制一行的行间距（复习：div标签独占一行）

line-height属性值：数字+px或当前标签字体font-size的倍数

2.4选择器

CSS部分学到这里就先做项目没学了，以后有机会复更。

3.JavaScript

JS是一门跨平台、面向对象的脚本语言。用于控制网页行为的，能使网页可交互。

3.1 js基础语法

3.1.1 js引入方式

1. 内部脚本
   将js定义在html页面内部

js代码必须位于<script双标签之间
<script可以写在html文档任意位置，任意数量。 一般把脚本放在<body标签的底部，可以改善加载速度

2. 外部脚本
   将js定义在外部js文件里，然后通过<script src="路径"引入对应js

外部js文件里，只包含js代码，不包含<script标签
js不能自闭和（不能写成单标签）

3.1.2 js书写语法

1.区分大小写
与java一样，变量名，函数名等都区分大小写
2.行末尾分号" ; “可有可无，一般要写
3.注释：与java一样，单行” // " 多行" /* */"
4.大括号表示代码块

if(count==3){
	代码块
}

3.1.3 js输出语句

1.警告框

<script>
	window.alert("内容")弹出框，一般省略"window."
</script>

2.浏览器输出

<script>
	document.write("内容")改变浏览器内容，属于dom操作浏览器元素
</script>

3.控制台输出

<script>
	console.log("内容")写入浏览器控制台信息
</script>