h5和css基础

一、文字标签

文字标签：

        所有的文字标签都是双标签，且都为行内标签

        1.加粗文字标签  (b)  (strong)

        2.下划线标签 [(a)] (u) (ins)  a标签也可以添加下划线

        3.删除线标签  (s) (del)

        4.倾斜标签  (i) (em)

二、特殊符号标签

特殊符号 可直接夹在p文件里面

三、表单控件

表单域  form  用于向web服务器提交信息

<form action=”” method=””>

    action —— 提交位置

    method —— 提交方式

    1.get（默认，传输的数据方法到导航栏上）

    2.post（传输的数据放在body）

   

    input标签：

    placeholder ——提示信息（输入信息自动覆盖）

    value —— 代表传递给后端的真实的值（可以一直存在）

    size —— 控制表单控件里面显示的内容多少的值

    maxlength —— 规定表单控件里面容纳的最大值

    checked —— 默认选中

    disabled —— 不可选

    重点在与type属性(h5新增type属性见第7点)：

1. text —— 文本输入框

<input type="text" size="10" maxlength="6">

1. password —— 密码

<input type="password" name="pas">

1. submit —— 提交

<input type="submit">

1. file —— 文件提交

<input type="file">

1. radio —— 单选

<input type="radio" name="w">哪个

<input type="radio" name="w">这个

1. checkbox —— 复选

<input type="checkbox" name="x" disabled>ddd

<input type="checkbox" name="x" checked>mmm

1. image —— 自定义按钮

<input type="image" src="t1.jpg" >

1. reset —— 重置按钮

<input type="reset">

8.button —— 按钮  当button在form里时相当于提交按钮(submit)

<input type="button" value="按钮">

四、其他表单控件

textarea 文本域

        是否支持伸缩（推荐禁止伸缩）----resize:none

        select-----选项框

有且至少要有一个选项

<option value="bj" selected>北京</option>

其中：1.value--传递给后端的值 （默认为距离最近的选项）

2.option  selected默认选中

五、h5新增语义化标签

语义化标签的使用等同于div标签。新增语义化字符标签如下：

六、新增标签

1. datalist-----定义选项列表，与input结合使用。里面有很多option选择组，表示表单控件可选值

 2. fieldset---特殊显示，例如加外边框

           legend---为fieldest标签定义标题（外标签的标题）

<fieldset>

         <legend>

              名字输入

         </legend>

         <input type="text" value="one">

</fieldset>

3. mark 标记语言

<p>今天<mark>好好</mark></p>

 4. meter

             min max -- 取值范围 value小于min不显示

             low high -- 颜色区分（范围界定） 

Value -- 当前值，必须属性

<meter min="1" max="100" value="10" low="20" high="50">

    </meter>

七、新增input type属性

八、常见input新增属性

<!-- autofocus --自动聚焦 -->

 <input type="text" autofocus>

    <!-- multiple--选择多个文件 -->

 <input type="multiple">

    <!-- autocomplete--默认值有on 或者off -->

<input type="text" autocomplete="on">

    <!-- required--填写时必须填上内容 -->

<input type="text" required> 

    <!-- accesskey-- 通过设置的快捷键，使用a|t+字母的形式一步到达需要填写的表格 -->

 <input type="text" accesskey="f"> 

九、多媒体标签

多媒体标签（embed） (audio)   (video)

十、css引入方式

1.行内样式（在标签内部作为一个属性去使用）

​
<h1 style="color: red;">行内样式</h1>

​

2.内联样式(作为一个style标签使用，可以写在任何地方，放在head里面效率高一点)

<style>
        p{
            font-size: 30px;
            color: aqua;
        }

3.外部链接css文件

（1）html文件中，使用link来导入css文件，

<link rel="stylesheet" href="./01.css">

（2）css文件中，定义css样式

p{
    color: blue;
}

4.总结

3种样式表的优先级：

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

十一、css字体属性

1. font-size

            控制字体的大小

            浏览器中不支持12px以下的文字大小，通过计算属性来控制字体变更小

​
<style>
    选择器{
        font-size: 20px;
    }
</style>

​

2. font-family

            (1)当font-family为一个英文单词的时候，不加"""，不加,

            (2)当为中文的时候需要加上"""

            (3)当英文单词不止一个的时候，需要用''，每个样式需要用,分隔开。依次检索，只要匹配成功一个后面的就不会再匹配了，如果没有匹配成功就按照默认样式

选择器{
     font-family: cursive;
}

3. font-weight

              字体加粗

              (1)可以使用bold或者bolder或者使用数字（100的正整数倍）进行调控  

              (2)不能识别负数或者0

              (3)不仅能使文字变粗，还能使文字变细

选择器{
  font-weight: bold;
}

4. font-style

            倾斜字体

            (1)默认值：normal

            (2)italic(斜体字体样式)

                oblique

选择器{
    font-style:italic ;
}

5.综合设置

选择器 {
    font: font-style  font-weight  font-size/line-height  font-family;
}

注意：使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要的属性可以省略（取默认值），但必须保留font-size、font-family属性，否则font属性将不起作用。