web前端开发03 -- HTML综述-CSDN博客

本文链接：https://blog.csdn.net/qq_34536604/article/details/106997821

`html`简介

标记语言：注重文档结构

程序语言：注重控制计算机

常用标记语言：

Xml: XML是元标识语言，用户可以根据自身的需要定义一些标记 
Html: 这是一种用来制作超文本文档的简单标记语言，用其编写的文档通常
后缀为html
XHTML:HTML的增强版，它的灵活性和扩展性会适应未来网络应用的更多需求,
语法要求更严格
HTML5: html最新标准

js css html 关系

html： 负责创建，负责语义的表达，解决了页面“显示内容是什么”的问题
css：负责解决网页中内容该如何显示的问题
javascript：负责讲解网页内容对事件该做出什么样的反应

`HTML`基本知识

`html`结构

<!DOCTYPE html>                     //申明html文档
<html lang="zh-Hans">  
    <head>                          //head 头部标签
        <meta charset="UTF-8">      
//meta 无结束标签，通过对应的属性来设置编码格式（必要）、
设备显示缩放、搜索引擎关键字、描述、浏览器内核渲染方式等内容。        
		<title>Document</title>     //title 设置网页标题
    </head>
    <body></body>                   //body 内容
</html>                             //html 文档跟节点

`html` 基础标签和元素

h: <h1></h1> 标题，有1，2，3，4。。。等标题
p:<p></p> :段落不识别回车和空格（回车会识别为空格，一个或多个空格为一个空格）
body:<body></body> 网页上需要显示的信息，其html主体写在body里面
meta：<meta charset="UTF-8" http-equiv="refresh" content="40">

闭合标签，其中可设置字符集

charset:标签属性设置字符集

http-equiv: 网页刷新

content:刷新间隔秒数
title:<title></title> 标题，整个网页的标题
hr:<hr> 水平线标签
br:<br> 换行
a:<a href="url" target="_blank"></a> 超链接

target="_blank" 从新窗口打开

<a href=“url” download>链接文本</a> 下载到本地

<a href="#c2">跳转到c2</a> 跳转到id=c2所对应的标签

img:<img src="images/a1.png"> 浏览器展示图片
b:<b></b> 字体加粗

语义化标签：

strong:<></> 强调语句
em:<></> 强调
div:<></> 布局标签（通用容器）
article:<></> 用于文章、新闻或博客，表示文档、页面、应用或一个独立的容器可嵌套
section:<></> 章节标签
aside:<></> 指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等
header:<header></header> 网页的额外信息，比如网页的脚本语言和网页使用的字符集等
footer:<></> 页脚
nav:<></>标记导航，仅对文档中重要的链接使用
time:<></> 时间
main:<></> 页面主要内容，一个页面只使用一次

特殊符号：

&lt  <
&gt   >
&nbsp  空格
&amp  &
&quot  "
&qpos  '

pre:<pre></pre> 原样输出，适合编程语句的显示
iframe框架：通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面
<iframe src="demo_iframe.htm" name="iframe_a" scrolling="yes"></iframe>

name：设置iframe的名称

width：设置iframe的宽度，值可以为像素（不用添加“px”单位）和百分数

height：设置iframe的高度，值可以为像素（不用添加“px”单位）和百分数

src：设置iframe元素内需要显示页面或文件的URL地址，
该属性的值可以由与之关联的a标签点击设置（通过将a标签的“target”
属性的值设置为该iframe的“name”属性的值进行关联）

frameborder：设置是否显示边框（0 表示不显示边框/ 1 表示要显示边框）

scrolling：设置是否允许滚动（auto/yes/no）

`html`列表标签

元素	描述
`ol`	定义有序列表
`ul`	定义无序列表
`li`	列表内容
`dl`	自定义列表
`dt`	列表项目描述
`dd`	列表项目描述


<body>
	<h4>无序列表:</h4>
	<ul>
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Milk</li>
	</ul>
</body>


<body>
	<h4>无序列表:</h4>
	<ol start=’50’>
	  <li>Coffee</li>
	  <li>Tea</li>
	  <li>Milk</li>
	</ol>
</body>

<dl>
	 <dt>a</dt>
	 <dd>a1</dd>
	 <dd>a2</dd>
	 <dt>b</dt>
	 <dd>b1</dd>
	 <dd>b2</dd>
	 <dt>c</dt>
	 <dd>c1</dd>
	 <dd>c2</dd>
</dl>

格式化标签

标签	描述
b	粗字体
em	着重
i	斜体字
small	小号字
strong	加重语气
sub	下标字
sup	上标字
ins	插入字
del	删除字

语言分类

编程语言：python，运算用
标记语言：结构化文档
自然语言：信息搜索等

全局属性

`id`

该属性能用于所有的HTML元素，为HTML元素指定一个唯一的标识符，用于CSS设置，
JavasSript进行操作或其它脚本语言及服务器端语言进行设置操作。

<p id="des"></p>
<b id="title"></b>

`class`

该属性可以用于所有HTML元素，为元素添加一个或多个类名。通常是用于CSS设置或配
合JavaScript进行操作设置，多个类名以空格符进行分隔，多个元素可以使用同一个类名。

<section class="box fr"></section>
<section class="box"></section>

`title`

该属性可以用于所有HTML元素，通过设置它的值，可以让用户鼠标悬浮在该元素上显示出“title”
属性中所设置的值。如之前提到的标签。起到一个补充说明的作用。

<img src="1.jpegv" alt="图片加载失败..." title="Ferrari">

`lang`

该属性用于设置元素的语言类型，不支持的标标有<base>，<br>，<frame>，<frameset>，
<hr>，<iframe>，<param> 及 <script>，但通常的使用方式是直接给标签设置该属性，
如：<html lang="zh-cn">、<html lang="zh">、<html lang="en">这样的形式，
分别表示将语言类型设置为“简体中文”、“中文”、“英文”。

h5播放器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<video controls="controls" autoplay="autoplay">
    <source src="h5_player1.mp4" type="video/mp4" />
</video>

</body>
</html>

表格和表单

表格

表格由 table 标签来定义。

每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。

字母 td(table data) 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水线、表格等等。

<table border="1" cellpadding="10”>  border 为边框宽度1 cellpadding 为单元格间距10 
    <tr>
        <td>
            row 1,col 2    
        </td>
    </tr>
</table>

表格标签

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格的单元
caption	定义表格的标题
colgroup	定义表格的组
col	定义表格列的属性
thead	定义页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

表格三大部分

thead ---------表格的页眉
    tbody ---------表格的主体
    tfoot ---------定义表格的页脚(在最下面,不管代码位置在哪里)<table border="1">
	    <tfoot>
	    <tr><th>row end col1</th><th>row end col2</th></tr>
	    </tfoot>
	    <tbody>
	    <tr>
	        <td rowspan="2"> 把包括本身的2格合并起来
	            row 1,col 1
	        </td>
	    </tr>
	    </tbody>
	    <thead>
	    <tr><td>位置</td><td>位置</td></tr>
	    </thead>

表格合并
```
colspan 合并列
rowspan 合并行
```

表单

表单创建

>表单是一个包含表单元素的区域。
HTML 表单用于搜集不同类型的用户输入。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、
单选框(radio-buttons)、复选框(checkboxes)等等。

>表单使用表单标签 form标签来设置:
多数情况下被用到的表单标签是输入标签 input标签 输入类型是由类型属性（type）定义的。

>form标签属性:

    action 提交到哪里去(点击表单之后)
    method 定义提交的方法 get post等方法
    input标签就是我们常见的输入框里面的内容
    placeholder 提示我们输入文字
    required 必须输入	<form action="tables.html" method="get">
	<label>账户</label><input type="text" name="test" placeholder=
											“输入” required>
	<input type="submit" value="submit">
	</form>
	```	

* 表单标签

		
	|标签|描述|
	|:-:| :-:|		
	|form|	
	|input|定义输入域
	|textarea|定义文本域 (一个多行的输入控件)
	|label|定义了 input元素的标签，一般为输入标题
	|fieldset|定义了一组相关的表单元素，并使用外框包含起
	|legend|定义了 fieldset 元素的标题
	|select|定义了下拉选项列表
	|optgroup|定义选项组
	|option|定义下拉列表中的选项
	|button|定义一个点击按钮
	|datalist|指定一个预先定义的输入控件选项列表
	|keygen|定义了表单的密钥对生成器字段
	|output|定义一个计算结果

	
	>我们通过type来定义文本的类型,如果password则不会显示密码里面的字段
	我们习惯在使用label表示表单的名称,在label中使用for,指向input中的id
	就可以在点击label标签的时候,跳转到Input标签中间去

	```html
		<form action="tables.html" method="get">
	    <label for='t1'>账户</label><input type="text" 
	    						name="name" id="t1">
	    <label for="t2">密码</label><input type="
	    				password" name="pwd" id="t2">
	    <input type="submit" value="submit">
	    </form>

单选按钮（radio）复选框（checkbox）

type="radio" 标签定义了表单单选框选项
表单中的单选按钮可以设置以下几个属性：
value、name、checked value：提交数据到服务器的值
name：为控件命名，以备后台程序 ASP、PHP 使用

checked="checked" 时，该选项被默认选中<form action="#" >
    <input type="radio" name="sex" value="male" 
    							checked>male<br>
    <input type="radio" name="sex" value="female">female<br>
</form>

下拉列表（select option）

<form action="#" >
    <select name="car">
    <option value="1">bmw</option>
        <option value="2">benz</option>
        <option value="3">audi</option>
    </select>
    <input type="submit" value="submit">

</form>

带边框的表单（filedset）


<form action="#">
<fieldset>
    <legend>
        fieldset的
    </legend>
    <label for='t1'>账户</label><input type="text" name="name" id="t1">
    <label for="t2">密码</label><input type="password" name="pwd" id="t2">
</fieldset>
    <input type="submit" value="submit">
</form>

添加文件

文件上传 type=“file"
使用file，则form的enctype必须设置为multipart/form-data，
method属性为POST。
<form action="#" enctype="multipart/form-data">
    <input type="file" name="upfile">
    <button>上传</button>
</form>

application/x-www-form-urlencoded 	在发送前编码所有字符（默认）
multipart/form-data	 不对字符编码。在使用包含文件上传控件的表单时
，必须使用该值。
text/plain	 空格转换为 "+" 加号，但不对特殊字符编码。

`CSS`

“行内样式”、“内嵌样式”、“外链样式”、“导入式”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="refresh">
    <title>中国男篮排位赛广州进行，将与国足下榻同一酒店</title>
  <style>                              // 内嵌样式
    p{
      text-indent: 4em;
    }
    h4{
      text-align: center;
    }
    img{
      width: 560px;
      height: 450px;
    }
    .p1{
      color: chocolate;
    }
    .p2{
      color: aqua;
    }
    #x2{
      color: cornflowerblue;
    }
    *{
      border: 0;
      margin: 0;
    }
  </style>
  <link rel="stylesheet" href="h5_css_1.css">   
  //外链样式 链接地址为编写的css外部代码
</head>
<body>
<article>
<header><h1 style="text-align: center">中国男篮排位赛广州进行</h1></header> 
//行内样式
<hr>
<h4 class="p1">(原标题)</h4>
<h5><img src="http://cms-bucket.ws.126.net/
2019/09/05/4740f77e15b9402a8877f302eb67a908.jpeg"></h5>
<p id = "x2">中国男篮59-72不敌委内瑞拉</p>
<p>而据澎湃新闻记者从国足处</p>
</article>

<p><b>延伸 · 回顾</b><hr></p>
<p><a href="https://sports.163.com/19/0904/21/EO8T046J00059AJ8.html">男篮无缘16强球
迷终于忍不了全场高喊"李楠下课"</a></p>
<p class="p2">北京时间9月4日晚</p>
<hr>
</body>
</html>

/*h5_css_1.css*/
h5{
  text-align: center;
}

`css`选择器

1.标签选择器
div  { width:  300px; height: 300px; background-color: red; }
p    { text-indent: 2em; color: blue; }
span { letter-spacing: 5px; font-size: 20px; }

2. 类选择器
.box  { width:  300px; height: 300px; background-color: red; }
p.des { text-indent: 2em; color: blue; }

3. id选择器
#box { width:  300px; height: 300px; background-color: red; }
#des { text-indent: 2em; color: blue; }

4. 通用选择器
通用选择器使用 * 表示，它的作用是选择页面中所有的标签元素

5. 后代选择器  可选择嵌套其中的任意一个子类
<style>
.container article { text-align: center; }
.container h1 { color: #000000; }
.container p  { color: #008800; }
</style>
<div class="container">
    <article>
        <h1>Napoléon Bonaparte</h1>
        <p>Adversity is the midwife of genius.</p>
    </article>
</div>

6. 子类选择器  只能选择直系嵌套下的子类

<style>
.container > article { text-align: center; }
.container > article > h1 { color: #000000; }
.container > article > p  { color: #008800; }
</style>

7. 伪类选择器

link：表示链接在正常情况下（即页面刚加载完成时）显示的颜色。
visited：表示链接被点击后显示的颜色。
hover：表示鼠标悬停时显示的颜色。
focus：表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用
		（鼠标松开时显示的颜色,
可以使用input来查看）。
active：表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）
		时所显示的颜色。

a { text-decoration: none; }		
a:hover { text-decoration: underline;}
      a:link{
            color: red;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: red;
        }
        a:focus{
            color:black;
        }
        a:active{
            color: yellow;
        }

8. 群组选择器

	<style>
	a, div, span, p { font-size: 20px; }
	div, p { margin:  0; padding: 0; }
	</style>


	<a href="javascript:;">超链接</a>
	<div>布局标签</div>
	<span>文本标签</span>
	<p>段落标签</p>

权重计算值


行内权重值：1000
ID选择器的权重值：100
class和伪类：10
标签选择器：1

!important 最高权重：10000 

#html1 {
           color: #73d44d !important;
           background-color: #93c1d4;
        }

1.每种权重值的最大值只能叠加9次

2.如果两个地方定义的权重一样的话,那么就按照最后定义的权重为准,这个原则
使用于 <style>和 <link>混合来使用

css高级选择器

CSS高级选择器区别于CSS普通选择器,是对标签元素的结构、标签元素的索引、标签元素
的状态等一些更为复杂的条件下进行的选择，甚至能改变现有标签的状态结构。

伪元素选择器：向指定的选择器添加指定的效果

1.：first-letter
	选择“块级元素”文本段落中的首个字符，只对块级元素生效 如<p>
2.:first-line
	选择“块级元素”文本段落中的首行文本，与1一样
3.:before
	在指定的选择器之前插入一段内容。插入内容默认为“行内元素”，可通过“display”强制转换类型。
	如果需要插入文本字符串，则直接将字符串赋值给 content 属性，
	如：`content: 'Hello, world!'	
	p {
    		letter-spacing: 5px;
    		font-size: 25px;
    		color: #ff4500;
    		text-shadow: 1px 1px 2px #000;
		}	
	p:after {
    		/*插入内容，这里以插入图片为例*/
    			content: url('xiaoxin.jpg');

    			position: relative;
    			top: 20px;
		}
		
		
结构性伪类选择器：该类选择器主要用于当前选择器精确地通过元素“索引值”或
“匹配类型”的索引值定位到该选择器的同级指定元素

1.:first-child
	对该类所有父元素中的首个子元素进行选择。
2.：last-child
	对该类所有父元素中的最后一个子元素进行选择。
3. :first-of-type
	对该类所有父元素中的首个匹配到类型的子元素进行选择。
4. :last-of-type
	对该类所有父元素中的最后一个匹配到类型的子元素进行选择。
5. :only-child
	对该类所有父元素中只含有唯一所匹配（不包含同级元素/只有一个子元素）
	的子元素进行选择。
6. :only-of-type
	对该类所有父元素中只含有唯一所匹配类型的子元素进行选择。
7. :nth-child(n)
	对其父元素的第“n”个子元素进行选择，通过设置参数“n(0开始)”指定为
	第几个元素。
	(该选择器不仅能准确的匹配到第“几”个指定类型的元素，还能对匹配类
	型元素的“奇偶索引”值进行选择。odd 表示奇数，even 表示偶数。)
8. :nth-last-child(n)
	该选择器和“:nth-child(n)”的特性基本一致，唯一的不同点就是该选择器
	的索引值是从该选
	择器匹配到的元素的同级元素中的最后一个开始进行计算的
9. :empty
  	该选择器会匹配所有，或指定基本选择器内没有元素（没有子节点
  	）的标签元素。
10. :not(selector)
  	该选择器是用于排除指定元素的选择器。

css文本和字体

文本设置


01. 文本对齐方式
	text-align 属性用于控制“行内块元素”、“块元素”或“行内元素”（文本元素）的居中方式，
	包含三个值：

	left：局左对齐（m o'ren）
	right：居右对齐
	center：居中对齐


02. 段落首行缩进
	text-indent 属性是用于设置每个段落首行缩进数量值的属性，CSS字体大小（font-size）可
	以设置的数值和单位在该属性的值中都可以使用（除了百分比）。如果是用于中文布局，一般会使
	用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。1em就等于16px，2em就是32px。
	
03. 文本装饰线
	text-decoration 属性是为文本上添加一根装饰线，带"href"属性的<a>标签默认
	会带有一根下划线，就是由该属性的值“underline”设置的。“text-decoration”
	属性有以下值：

	none（默认）：不显示任何装饰线
	underline：在文本下方显示装饰线
	overline：在文本上方显示装饰线
	line-through：在文本中间显示装饰线，相当于删除线
	
04. 大小写转换
	text-transform 属性能将“行内元素”中的英文文本进行大小写转换，以满足网站对
	规范性的要求。该属性有以下属性值：

	none（默认）：保持文本中英文单词的默认大小写
	capitalize：每个英文单词首字母为大写字母，其它为小写字母
	uppercase：将所有英文单词转换为大写字母
	lowercase：将所有英文单词转换为小写字母

05. 文本阴影
text-shadow 属性的作用是给文本添加阴影效果。目前除了IE9及之前版本不支
持该属性外，
其它主流浏览器均支持该属性。该属性有4个值，具体如下：text-shadow: 
H V blur color;

H：水平偏移，“0”表示维持原位，正数为向右偏移，负数为向左偏移。
单位为像素“px”。
V：垂直偏移，“0”表示维持原位，正数为向下偏移，负数为向上偏移。
单位为像素“px”。
blur ：模糊距离，用 正数 表示阴影模糊的单位距离，距离越大模糊程度越高。
单位为像素“px”。
color：阴影颜色，支持Web技术中的常用颜色模式：“颜色英文单词”、
“HEX”、“RGBa”、“HSLa”。

<p style="text-shadow: 2px 2px 5px #000;">Hello, World!</p>

06. 文本行高
line-height 属性是用于设置“行内元素”中文本元素在一行中所占据的高度
当文本元素只有一行时，可以将该行的文本行高设为和父容器元素高度一致，
以此到达文本垂直居中的效果。使用场景如：表格、导航按钮、自定义样式
按钮、标题栏等。

<!-- HTML 部分 -->
<div class="txt">CHINA</div>

<!-- CSS 部分 -->
<style type="text/css">
    .txt {
        width:  260px;
        height: 260px;
        background-color: #000;

        color: #fff;
        text-align: center;
        line-height: 260px;

        /*字符间距*/
        letter-spacing: 5px;
        /*字体大小*/
        font-size: 36px;
        /*文本阴影*/
        text-shadow: 3px 3px 5px skyblue;
    }
</style>


07. 单词间距  word-spacing 如“像素（px）”，“字符（em）”，“点（pt）”等，可以为负数。

08. 字符间距 letter-spacing 属性是用于控制字符间的间距，即无论单词或词语中含有空格
	（该属性对空格字符无效），该属性都会生效，单位同样为Web技术的常用度量单位，
	同样为可以为负数。

字体设置


01. 字体颜色
在目前的浏览器标准中，要想改变浏览器默认字体的颜色（#000000）唯一的途径就是通过
CSS的 color 属性进行设置。颜色属性可以设置4种类型的值，有以下类型：颜色属于继承属性

颜色英文单词
	HEX（16进制颜色）
	RGBa/RGB（Alpha的三原色）
	HSLa（Alpha的Hue、Saturation、Lightness）
	Transparent（透明）
	inherit（继承父级）

02. 字体样式
font-style 用于设置字体类型，可设置以下值：

	normal：普通字体
	italic：斜体
	oblique：倾斜字体

03. 字体粗细
font-weight 用于设置字体粗细，可设置以下值：

	normal：正常粗细
	bold：粗体
	bolder：更粗的字体
	lighter：更细的字体
	100~900：步长为100，400 等同于 normal，而 700 等同于 bold
	
04. 字体大小 font-size 目前浏览器的主流的字号都是采用16像素（px）的字体。

05. 字体名称 font-family 用于设置字体系列，就是我们通常说的“所用字体”。

06. 字体组合值 font 属性用于设置字体样式的组合值写法，其语法形式为：


扩展：文字两端对齐

div {

    width: 120px;
    padding: 5px;
    margin:  2px;
    border:  1px solid #ff4500;
    border-radius: 5px;

    text-align-last: justify; /*两端对齐*/
}

css元素分类

1.在CSS中，html中的标签元素大体被分为三种不同的类型：
	块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>

2.块级元素 block

块级元素特点：
	1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
	2、元素的高度、宽度、行高以及顶和底边距都可设置。
	3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），
	   除非设定一个宽度


3.内联元素 inline
	内联元素特点:
	1、和其他元素都在一行上；
	2、元素的高度、宽度及顶部和底部边距不可设置；
	3、元素的宽度就是它包含的文字或图片的宽度，不可改变。


4.内联块状 inline-block
	特点
	1、和其他元素都在一行上；
	2、元素的高度、宽度、行高以及顶和底边距都可设置。


5.类型转换  通过display:block 我们可以将元素转换类型  a{display:block;}

盒模型

1. 所谓盒子模型，即是将网页布局中的元素（行内/行内块元素）进行拟物化的比喻，
一个盒子由内容
（content）、内间距（padding）、边框（border）以及外边距（margin）
组成

提示：只有 块级元素 与 行内块元素 具备盒子模型。


2. CSS盒子模型的类型主要有两个：
	IE浏览器盒子模型：box-sizing:border-box;
	标准（W3C，其它主流浏览器）盒子模型（默认）：box-sizing:content-box;

3.盒子属性：
	宽度：width
	高度：height
	内间距：padding  设置盒子内容与边框之间的间距，即内间距（填充）
			padding 可以接收的值为：像素（px）、百分比（%）、inherit
								（继承）以及auto（浏览器自计算）
	外间距：margin   margin 属性主要用于设置某元素相对于同级元素和父
	级元素的一个距离值，常用单位像素“px”。该属性对文本类元素
	（即“行内元素”）标签是无效的。和 padding 一样


4.边框：border 属性的作用是为设定该属性的元素添加边框 该属性能对任何显
		示类型的元素设置，包括“行级元素（inline）”。该属性有三个分支属性：
		1）、border-width
		设置边框宽度，单位为像素。设定边框的宽度。可以为Web技术中常用
		的度量单位，通常为像素“px”。
		2）、border-style
		设置边框的类型，主要有以下可以设定的值：
				none：无边框  solid：实线边框  dotted：点线边框  
				dashed：虚线边框
				double：双线边框  groove：3D凹槽边框  
				ridge：3D凸槽边框 
				inset：内浮雕边框  outset：外浮雕边框
		3）、border-color
		设置边框颜色，支持英文单词、十六进制以及rgb颜色。
		4）、border  
		通过 border 属性直接设置四个方向的边框样式
		
		
5.盒子圆角
border-radius：设置边框圆角

6.元素阴影
box-shadow 属性能够让元素获得一个“阴影”效果，根据颜色的不同，
有时候也可以叫做“发光”效果

css布局模型

1.css的布局模式分类: 
	流动模型（Flow）浮动模型 (Float) 层模型（Layer）

2.流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 
网页元素都是根据流动模型来分布网页内容的。
	特征：（1）块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，
				因为在默认状态下，块状元素的宽度都为100%。实际上，块状
				元素都会以行的形式占据位置。
		 （2）第二点，在流动模型下，内联元素都会在所处的包含元素内从左
		 		到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
			
3.float 浮动模型
	块状元素都是独占一行，如果现在我们想让两个块状元素并排显示
	任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，
	如 div、p、table、img 等元素都可以被定义为浮动。

4.层模型：能让层一样可以对每个图层能够精确定位操作
	层模型有三种形式：
	1、绝对定位(position: absolute) 绝对定位,把图形定义在绝对的位置
	2、相对定位(position: relative) 为元素设置层模型中的相对定位，需
	要设置position:relative（表示相对定位），它通过left、right、top、
	bottom属性确定元素在正常文档流中的偏移位置。
	3、固定定位(position: fixed) fixed：表示固定定位，与absolute定位类
	型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身

css可见性

1.CSS Display(显示) 与 Visibility（可见性）

visibility:hidden:可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样
			的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none:可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该
		元素不但 被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

举例

<!--

<!DOCTYPE html>
<title>Title</title> <style>
    ul{
        list-style-type: none;
    }
    #ul1{
        /*
        1.把 边框去掉
        2. 把li标签上面的点号去掉
        */
        margin: auto;
        padding: 0;
        width: 400px;
    }
    #ul1>li{
        /*
        给li标签整个增加背景颜色
        给li标签增加下面的分析
        */
        background-color: #8bd400;
        margin-bottom: 2px;
        margin-left: 2px;
        height: 40px;
        width: 80px;
        border-radius: 5px;
        float: left;
    }
    a{
        /**
        把a标签的下划线去掉
         */
        display:block;
        height: 40px;
        text-decoration: none;
        /*
        把文字放在中间
        */
        text-align: center;
        /*
        把文字行间距和整个block一样,那么文字就居中了
        */
        line-height:40px;
        /*
        加上椭圆
        */

        border-radius: 5px;

    }
    #li1{
        position: relative;
    }

    #li1 ul{
        margin: 0;
        padding: 0;
        position: absolute;
        display: none;
    }
    #li1 ul>li{
        margin: 0;
        color: grey;
        text-align: left;
        border: 1px solid;
        background-color: #ffcf41;

    }
    /**
    当数据过去的时候,整体变成深绿色
     */
    a:hover{
        background-color: green;
    }

    /*.c_li1:hover #ul2{*/
        /*display: block;*/
    /*}*/

    #ul1 li:hover >a~ul{
        display: block;
    }

    #ul2 a:hover{
        background-color: blue;
    }

</style>

-->

JS

基础

<!--
<script>
      /*
      //前端语法会尽量隐藏报错
      const i = 10;  //常量定义
      var a = 10;
      var b = 20;
      var c = a + b;
      var d = "helllo world";
      var e = "1234"
      console.log(a);
      console.log(c); //在浏览器中开发者工具console中打印输出
      console.log(d);
      document.write(a);//在浏览器页面输出
      document.write(d);
      document.write(a+d);  //可以直接加减任何类型
      document.write(Number(e)+a); //使用Number String等进行类型转换
      alert("helllo world") //页面弹窗
      //js中类型
      var b;
      b = 10; // 'number'
      console.log(typeof b);
      b = true; // 'boolean'
      console.log(typeof b);
      a = 'Henrry Lee'; // 'string'
      console.log(typeof a);
      a = function(){}; // 'function'
      console.log(typeof a);
      a = {age:26}; // 'object'
      console.log(typeof a);

      */
      var aa = [1,2,3,4,56,23,1];
      for(var i in aa){
          document.write("下标：" + i + "  ||值：" + aa[i] + '<br>');
      }
      for (var i of aa){
          document.write(i+'  ');
      }

      function plus(num) {
          if(num === 1){
              return num;
          }
          return num + plus(num - 1);
      }
      var sum = plus(100);
      document.write('<br>' + sum);
    </script>

-->

函数方法

<!--

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js基础教学</title></head>
<body>
<ol>
</ol>
<button onclick=first()>确认</button>  <!--捕捉onclik事件操作并执行
所对应函数 可以写在这里也可以重新定义函数引用-->
<button onclick="">第二次确认</button>
<br>
<hr>
<button onclick="">第三次确认</button>
</body>
<script>
  function first(){                //定义函数
      alert('确认点击后 弹窗函数被执行');
  }
  var b = document.getElementsByTagName('button')[1];  //确认位置
  b.onclick = function(){   //函数编写并绑定'点击'事件
      alert('新方法，直接绑定点击事件并弹窗');
  };
  var c = document.getElementsByTagName('button')[2];
  c.onmouseover = function(){    //移到该位置便弹窗事件
      alert('鼠标进过便弹窗')
  };
  /*
  ol = document.getElementsByTagName("ol");
  ol = ol[0];
  ol.children;
  ol.childNodes;
  ol.childNodes[2];
  ol.firstElementChild;
  ol.lastElementChild;
  l1 = ol.parentElement;
   x1 = li1.previousElementSibling; //直接在console中输入即可
   */
  ol = document.getElementsByTagName('ol')[0];  
  //插入子节点步骤 1。获取标签
  var li2 = document.createElement('li'); 
  //2。创建子标签
  ol.appendChild(li2); 
  //3。添加标签
  li2.innerText = 'Test'; 
  //4，标签内容
  var li3 = document.createElement('li');
  ol.appendChild(li3);
  li3.innerText = 'Test2';
  var body1 = document.getElementsByTagName('body');  
  //插入相邻节点步骤 1。获取标签
  body1 = body1[0];  
  //2。精确定位标签
  var div1 = document.createElement('div'); 
  //3。创建div标签
  body1.insertBefore(div1,ol);  
  //4.插入该标签
  div1.innerText = 'xxxxx'; 
  //5.标签内容
</script>
</html>
-->

js练习


<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
</head>
<style>
  td{
    border: 1px solid black;
  }
  *{
    margin: 0;
  }
</style>
<body>

<table cellspacing="0px" id = 't1'>
  <tr>
    <td colspan="4">
      <button onclick="add()">添加</button><button onclick="del()">
      						删除</button>
    </td>
  </tr>
  <tr>
    <td>全选 <input type="checkbox" name="check"></td>
    <td>书号</td>
    <td>书名</td>
    <td>作者</td>
  </tr>
</table>

</body>
<script>
  function add() {   //添加按钮：添加表格标签并加入内容
      var table = document.getElementById('t1');  
      //获取table下标签
      var tr1 = document.createElement('tr');  
      //创建tr标签
      tr1.innerHTML = "<td><input type = \"checkbox\" 
      					name=\"check\">
      </td><td>1</td><td>2</td><td>3</td>"; 
      //在tr标签中输入html语法
      table.appendChild(tr1); 
      //tr中添加该语法
  }
  function del() {
      var inputs = document.getElementsByTagName('input');
      var del_inputs = [];
      for(let i of inputs){
          console.log(i.checked);   
          //是否选中：根据checked的值确定
          if(i.checked) {
              del_inputs.push(i)     
              //删除该按钮的值
          }
      }
      //return del_inputs
      for(let i of del_inputs){
          let tr2 = i.parentNode.parentNode;
          let table2 = tr2.parentNode;
         table2.removeChild(tr2);
      }
  }
</script>
</html>