html总结

html

html的访问方式有两种

1.网络访问方式：http://127.0.0.1:8848/web01/day1/aa.html

http:网络协议

2.文件方式访问： file:///C:/Users/Administrator/Documents/HBuilderProjects/web01/day1/1.html文件的结构.html

<span></span><!--文本标签 -->
<h></h><!-- 标题标签： h1 ~h6 , 字号逐渐变小，越来越细    . 换行显示的标签 -->
<p></p><!-- 段落标签： p  -->
<div></div><!-- 文本标签：div , 没有默认的样式效果 ， 换行的标签 -->
<br><!-- 换行标签： br标签用于换行 -->
<hr width="300px" color="aqua" /><!-- 产生一条横线的标签： hr标签  , width属性，设置宽度-->
<ul></ul><!-- 列表标签： ul（un order list - 无序列表） -->
<ol></ol><!-- 列表标签： ol（ order list - 有序列表） -->
<b></b> <i></i> <u></u> <del></del> <!-- 加粗， 倾斜， 下划线， 删除线 -->
<sub></sub><sup></sup><!-- sub:下标， sup：上标 -->
<img>
<!-- img标签：img标签的功能是引用一张存在的图片，在网页上显示图片。
             src: 引用的图片资源的路径
                 ** 相对路径: 根据当前文件的路径，查找需要引用的资源的路径 （../img/b.jpeg）。
                 ** 绝对路径：从协议开始的全路径. (http://127.0.0.1:8848/web01/img/a.jpeg)
                             可以省略协议及其域名， 直接从根目录开始的路径，也就是绝对路径。（/web01/img/a.jpeg）
            width: 宽， height: 高 ， title: 标题
            alt: 如果图片没有正常加载成功，则显示alt的文字说明。
         -->
<a></a>
<!-- a标签： 超链接标签， 点击超链接标签，可以让页面跳转到新的资源路径。网页的内容被更新了。
             href属性：指定需要跳转的url地址（相对地址， 绝对地址）。
             ** url：统一资源定位路径。(网络上可以访问的资源的路径)。
             target属性：_blank - 打开的内容显示在一个新窗口， _self - 打开的内容显示当前窗口。
         -->
<!-- 设置顶部标志：定义锚点 -->
<a name="top">顶部区域</a>
<!-- 通过定义的锚点的名字top， 跳转到锚点所在位置。 -->
<a href="#top">回到顶部</a>
<table></table>
<!-- table标签：用于实现表格
             - caption 设置表格的名字
             -tr (table row) : 行
             -th:th和td类型， th中的文字会加粗
             -td  : 列(单元格)
             table标签的属性：
                - border  ,边框
                - width ， 宽度（默认的宽度有表格中的内容的宽度决定）
                - cellspacing="0" , 设置单元格之间的宽度
                - cellpadding="0"  ， 设置文本内容和表格边框的宽度
                - align : 表格显示位置
                -colspan="3" : 把三列合并为1列， 让每行的列数相等。
                 -rowspan="2" ： 把两行的单元格合并为一个。让每行的列数相等
-->
<form></form>
<!--  form标签：  表单相关的标签， 其内部嵌套用于用户输入数据的标签。
              * action:  表单提交的请求地址(url)
              * method:  请求的方式get / post
              * enctype :  设置enctype的类型 ， 对请求参数的处理方式。
                       ** 如果表单中涉及到文件上传 ，要求：method是post , enctype设置为multipart/form-data
         -->
<input>
<!-- 
                 input标签： 用于用户输入数据
                 * type: 设置标签的类型,对用户输入的数据进行一些设置
                 * name: 用户输入的数据，传输到服务器端的时候 ， java程序根据name的值，获取到输入框的数据。
                 * value: 对应的就是用户输入的数据值
                 type="submit":提交请求(请求的地址 + 请求的参数)的按钮  , 单击按钮触发表“单提交事件”
                   “表单提交事件” ： 发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端。
                   http://127.0.0.1:8848/web01/day2/xxx.html?username=tom&userpwd=1234
                         url                                ?     参数 （&参数之间的分隔符）
                   type="reset" , reset事件， 清空表单中的数据值
              -->
 单行文本框： <input type="text" name="user" /><br>
             密码框：<input type="password" name="pwd" /><br>
             隐藏域：<input type="hidden" name="hide" /><br>
             文件上传：<input type="file" name="photyo" /><br>
             <!--  单选按钮：①一般一组单选按钮，需要设置相同的name值，才能保证只有一个按钮被选中。 
                            ② 标签后面的文本提示，是给用户看的， 标签的value值时给 程序使用的。
                               (程序中用0表示男，1表示女)
                            ③ checked="checked" ,表示设置为默认选中
             -->
             单选按钮：<input type="radio" name="sex" value="0"/> 男
             <input type="radio" name="sex" value="1" checked="checked"/> 女  <br>
             复选框：<input type="checkbox" name="hobbys" value="看书" checked="checked" /> 看书
             <input type="checkbox" name="hobbys" value="弹琴" /> 弹琴
             <input type="checkbox" name="hobbys" value="跑步" /> 跑步<br>
             下拉列表(单选)：<select name="city">
                         <option>请选择</option>
                         <option value="0">上海</option>
                         <!-- selected="selected" : 设置默认选中项 -->
                         <option value="1" selected="selected">北京</option>
                         <option value="2">天津</option>
                     </select><br>
            下拉列表(多选):
            <!-- multiple="multiple"：用于设置下拉列表，支持多选  -->
            <select name="language" multiple="multiple" size="6">
                <option value="java">java</option>
                <option value="c">c</option>
                <option value="c++">c++</option>
                <option value="python">python</option>
                <option value="html">html</option>
            </select><br>
            多行文本框：
            <!--  cols="5" :设置宽度  rows="10" :设置高度 -->
              <textarea name="info" cols="5" rows="10"></textarea><br>
            submit:<input type="submit" value="提交数据" /><br><br>
            reset:<input type="reset" value="清空数据" /><br>
            button:<input type="button" value="普通按钮" /><br>
            
            分组标签：
            <fieldset>
                <legend>地址</legend>
                邮箱： <input type="email" name="email" />
                
                年龄: <input type="number" name="phone" />
                date: <input type="date" name="date" />
                颜色：<input type="color" name="color" />
                submit:<input type="submit" value="提交数据" /><br><br>
            </fieldset>
<!--  iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。 -->
        <iframe src="1.表单相关标签.html" width="100" height="100"></iframe>

CSS

css : cascading style sheet , 级联样式表 , 用于调整html中标签的样式的语言。 语法规则： "样式名:样式的值" , 比如 ： color: red ，这个指定字体的颜色为红色。 "样式名:样式的值, 样式名1:样式值1" , 比如： color:red , font-size: 20px 三种使用方式： ① 内联样式： 直接在标签上，通过style属性进行使用。 ② 内部样式： 在head标签中，通过<style>css语言<style>标签，使用样式。 ③ 外部样式：通过在head标签中， 使用<link href="xx.css">标签，引入css文件，进行样式的使用。

css特征： ① 继承性： 父元素的一些样式，会被其子元素继承。比如字体颜色。 ② 层叠性： 一个元素可以有多个样式效果进行叠加。 ③ 优先级： 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式] ** 外部样式/内部样式/内联样式: 根据谁后写，谁优先。

层叠性 ： background: yellow; 背景色 font-size: 20px; 字体大小 color: #FF0000; 字的颜色 font-weight: bold; 字体的粗细 width: 300px; height: 100px; 标签的宽，高 overflow: scroll; 溢出，则使用滚动条。

优先级:

内联样式的优先级高于内部样式和外部样式

内部样式和外部样式： 谁后写，谁优先。

Id选择器： #id的值 {}

标签选择器： 标签名{}

class选择器： .className{}

选择器： selector ,根据某个特征，找到标签。 ① 标签选择器: 根据标签的名字，选择到对应的标签(当前html页面中的该标签都被选择出来。)。 ② id选择器： 根据标签的id ， 选择标签。(一个html页面 ， id是唯一的， 只会选择出一个符号条件的标签). ③ class选择器： 根据标签的class属性 ， 选择标签。( 一个html页面， class允许重复， 可以选择出多个符合条件的标签。

        ④ 分类选择器： 元素选择器和class/id选择器一起使用.
         ⑤ 分组选择器： 选择器1 , 选择器2 ， 选择n....{样式}
         ⑥ 派生选择器：  找子(嵌套在内部的第一层符号条件的标签元素) 选择器>选择器{}
                        找子孙(嵌套在内部的所有符号条件的标签元素)  选择器 选择器{}

优先级：id选择器优先级 > class选择器 > 标签选择器

伪类选择器：

伪类:hover(鼠标移入元素就是hover.), 鼠标移入到图片上，图片边框变为白色的2px

伪类:focus , 输入框获取焦点的时候，设置的样式

盒子模型

边框 border: 3px solid gray; 四个方向均有边框

margin: 外边距， 设置元素之间的间距

padding :内边距， 设置元素和自己内部的内容之间的间距

content：内容区

溢出

overflow: hidden; 溢出的解决方式： 隐藏溢出部分 overflow: scroll; 设置出现滚动条，溢出的内容通过滚动条查看 overflow: visible; 溢出部分可见 ， 溢出的默认处理方式 overflow: auto; 继承父元素的溢出处理方式

定位

position：定位 , top , left , right, bottom 设置元素的具体的位置。 ① 相对定位:relative , 参考自己本身原来的位置。 ② 绝对定位:absolute , 参考的是自己的有相对定位的包裹元素， 如果直接父元素没有相对定位，那么就找父辈的， 如果最终也没有，那么就找html(body)为准。 ③ 固定定位:fixed , 参考html(body)

浮动

子元素浮动之后，父元素高度为0，造成溢出现象：

解决方式① 给父元素设置高度，

② 使用overflow，隐藏溢出。 ​ height: 100px; 内部嵌套的元素浮动之后，包裹元素高度为0. 可以给包裹元素设置高度。 ​ overflow: hidden; 内部嵌套的元素浮动之后，包裹元素高度为0 ， 可以使用overflow: hidden; 让包裹元素的高度和内部元素高度匹配

float: right;右浮动: 标签浮动之后，影响了其他标签的显示。如果其他标签不想受其影响，可以在标签中通过clear，清除浮动的影响。

clear: both; 清除浮动的影响： none - 不清除, both-清除两边的浮动元素的影响， left-清除左边的影响， right - 清除右边的影响

定位：流定位 ， 浮动定位， 相对定位， 绝对定位， 固定定位 ①流定位： 页面中的块级元素从上到下一个接一个显示， 行内元素在一行中从到右排. ②浮动定位： 让元素脱离了普通的流定位 ，通过css的float属性设置元素的浮动方向，浮动元素依旧在父元素内部，用它实现特殊的定位效果。

index

给元素设置了定位之后，如果被定位的元素的位置相同，则会发生堆叠现象(重合在一起) ，可以使用z-index，修改显示。 z-index:数据; 标签设置z-index之后，数据值越大的显示在越上层(就是能够被看见的。

JS

javascript 简称js ， <script>标签内部只能写符合js的语法规则的语句。

let span ; 定义变量 （let是定义变量的关键字）

document对象是js的内置对象。

getElementById("close") - 函数,根据id找到元素。

*** onclick:js中的单击事件, 当元素被单击的时候，则执行单击事件对应的函数。

function:表示函数

js的三种使用方法

1.事件定义的方式

2.js嵌入到html页面，通过<script>标签来使用

3.把js相关内容写在单独的.js文件中，然后在html页面上，通过<script src="xx.js">引入js文件，进行使用。

a. 如何产生随机数， Math.random() ,得到[0,1)的随机小数 , Math是js的内置对象

b. parseInt() ,取整 ，将字符串转换为整数

c. 元素.innerHTML : 给标签元素的内部嵌套其他的html内容。 元素.innerText : 给标签元素的内部嵌套文本内容。

d.isNaN() ,Js的一个函数，实现判断某个变量是否为数字. NaN- not a number

e. if...else if .... -- 同java语法规则

for循环的语法规则： for(循环的起点;循环的判断条件;循环条件的变化){ 循环体 }

** parseInt(): input输入框获取的数据值是string , 解析为number,然后计算结果

** Math.sqrt(数据) : 计算平方根

** getElementsByName(标签的名字) : 找出的是一个数组

** innerHTML: 浏览器解析为标签的显示方式。

** innerText: 浏览器不解析，直接显示内容。

js中，boolean参与运算的时候，true转为1，false转为0.

js中，有string参与运算的时候，做的是字符串的拼接

js中， 把变量直接用于条件判断的时候， 非空为true , 空为false.

数据类型转换相关的函数

1. typeof(变量名)：判断数据类型

2. toString(变量名)：转换为字符串

3. parseInt(变量名)：转换为int

4. parseFloat(变量名)：转换为浮点型

5. isNaN(变量名)：不是数字，返回true，是数字，返回false.

1. 通过事件调用js函数：

   οnclick="change(this)" -- this代表的就是当前触发单击事件的元素对象。

== :表示判断内容是否相等。 ===: 被称为全等, 内容和类型都要相等。

js提供的周期性定时器函数.-- 间隔多长时间，重复执行某个函数 setInterval(function , 时间毫秒数) js中函数的参数可以是函数类型。