html基础

### Html

    HTML：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。

    能够传传输声音和视屏。也就是给文本加上含有语义的标签。 是用来描述网页的一种语言。

        HTML 指的是超文本标记语言: HyperText Markup Language

        HTML 不是一种编程语言，而是一种标记语言

        标记语言是一套标记标签 (markup tag)

        HTML 使用标记标签来描述网页

        HTML 文档包含了HTML 标签及文本内容

        HTML文档也叫做 web 页面


1、Html中的标签：

    a、标签：用“<>”包起来的内容。

        Html标签：<html></html>

        作用所有html中标签的一个根节点

        lang:用来设置当前页面的语言。


            <html lang="en"></html>


            作用：

                a.设置页面上主要使用语言的类型。

                b.将来做SEO的时候在权重上起到一定的作用。

                c.用于特殊设备上的设置。

    b、h系列的标签(Header)：h1,h2,h3,h4,h5,h6


        作用：把页面上的文字加上标题的语义


        h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）

        注意：一个页面只能有一个h1标签。<因为一个文章只有一个大标题>


    3、p标签(Paragraph)：段落标签


        作用：给页面的上一段文字加上段落的语义

        <p>这是段落</p>

        特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。


    4、hr标签(Horizontal Rule)


        作用：在页面显示一条横线。<hr />

        特点：在页面显示一条横线，默认占整行。


    5、br标签(break)


        作用：换行。<br />


    6、b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins


        作用：

            b：加粗u: 下划线i:  倾斜s: 删除线

            建议不要使用，因为这些标签没有语义。

            strong:加粗 ins:下划线em:倾斜del:删除线

            可以使用


    7、img标签(image)：


        作用：在页面显示一张图片。如果不设置宽，成比例缩放。

        代码：<img src=”图片的路径” />

        特点：就是显示图片.


    8、a标签(Anchor)：锚


        a标签的其它名称：超级链接，超链接，锚链接。

        作用：可以在一个页面跳转到另一个页面

        <a href=”页面的路径”></a>

        注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。

        可以不跳转（跳转到当前页面）href=”#”

        可以在当前页面进行定位。

            A.设置a标签的href属性为“#id名”

            B.在页面的指定位置加入一个目标标签（可以是任意标签）

            C.必须给这个标签设置一个id名：<p id=”mubiao”>这是目标</p>

        可以进行下载

            <a href="/images/myw3schoolimage.jpg" download="filename">


        属性：


href | a标签跳转的目标地址

---|---

target | _blank:保留原始页面，再进行跳转 _self:在当前页面进行跳转

base |为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）

    <a herf="url" target="_blank"> </a>

    <base target="_blank">

    锚伪类：

      a:link

        代码：a: link {color: red;  font-size: 30px;}

        作用：给a标签设置没有被访问过的样式


      a:visited

        代码：a:visited {color: pink;  font-size: 40px;}

        作用：给a标签设置访问过的样式


      a:hover

        代码：a:hover {color: yellow;    font-size: 50px;}

        作用：给a标签设置鼠标悬停时的样式。


      a:active

        代码：a:active{color: green;  font-size: 60px;}

        作用：设置a标签被激活时的样式（被点击时的样式）。


      注意：

        在使用的时候一定遵守这样的顺序：

            a:link ,a:visited,a:hover,a:active

            b.  有些锚伪类除了可以作用在a标签上还可以作用来其它标签上：

            :link、:visited 只能用于a标签

            :hover、:active  其它标签也可以使用这个伪类

    9、pre


        元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

          标签的一个常见应用就是用来表示计算机的源代码


    10、Head标签


        用于存放title,meta,base,style,script,link，

        注意：每个head标签中都必须有一个有title标签，其它的可选


    11、Body标签


        作用：用于存放所有的html的结构标签：

        p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,


    12、Title标签：


        作用：让页面拥有一个属于自己的标题


    13、meta 标签：


        常用用法：

            1. Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。

            2. Keywords：关键词，可以用来提高页面的关健词的比重（前升排名的一种方式。）

            3. 字符集（编码格式）：

            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

            Charset（字符集的格式）：UTF-8


    14、列表


        a、无序列表：

            <ul>

            <li></li>

            </ul>

        b、有序列表：

            <ol>

            <li></li>

            <li></li>

            </ol>

        c、自定义列表

            <dl>

            <dt></dt>

            <dd></dd>

            </dl>


    15、表格


        总结：在早期的网站开发中，表格的使用非常的泛滥。

        表格：不是没你不可，而是有你更好。

        作用：用来将数据以表格形式显示出来。

        <table>

        <tr>

        <td></td>

        </tr>

        </table>


        border-collapse: collapse;/*去掉单元格之间的间隙*/

标签 | 作用 | 特点

---|---|---

th | 起到表头的作用 | 其中的文字加粗，居中

caption | 给表格设置标题 | 在表格的最上面显示标题

thead | 用来存放当前列的表头 |如果没有加css页面默认将表头中的高度设置变小

tbody | 一般用来存放页面中的主体数据 |如果不写会自动加上

tfoot | 一般情况不会出现 |

    16、表单

        作用：用来收集用户的信息，将来提交到服务器

        标签        属性            作用

        input：    type            text:文本框

                                    password：密码框

                                    hidden:隐藏域

                                    radio:单选框

                                    checkbox:多选框

                                    button:按钮

                                    reset:重置

                                    image:图片按钮

                                    submit:提交

                    value          用于设置默认值(text,password,button)

        select：    option          下拉框

        textarea：                  文本域


        如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同name属性


        如何给radion,checkbox设置默认值呢？

        设置另外一个属性：checked=”checked”

        我需要给下拉框设置默认值？ selected="selected"

        disabled 可以设置input元素是否被禁用


    17、Form标签

        作用：用来管理页面上的表单元素，表单元素如果要起作用，必须要放在form标签中。


属性 | 作用

---|---

action | 将所有的数据提交到action指定的页面

    <form>

        <label for="male">Male</label>

        // label的for和input的id对应起来 当点击label的时候 增大触发面积 input框会自动获取焦点

        <input name="sex" id="male" />

        <br />

        <label for="female">Female</label>

        <input name="sex" id="female" />

    </form>


    这样写当你点击label的时候，inpu会自动获取焦点，label的for和input中的input中的id相同

    input type=resrt的按钮只能在Form之中才能起作用

    jquery可以通过下列方式获取表单信息，此时它会自动获取,key为name的关键字

      var params = form.serializeArray(),

          options = {};

      $(params).each(function (k, v) {

        if (v.value) {

          options[v.name] = v.value.trim();

        }

      });


      元素js获取表单元素的值


    function(formId){

    var from=document.getElementById(formId);

    var tagElements=from.getElementsByClassName('el-input');//这里我把所有我要获取值得属性都使用了同一个类来标识；

    var json={};

    for (var j = 0; j < tagElements.length; j++){ 

var name=tagElements[j].name;//这里就是要获取得name属性，将此name属性作为json对象得key；

var value=tagElements[j].value;

  json[name] = value;//注意这里必须要使用这种方式给json赋值。如果使用json.name=value得话你会发现你所有的key都是一个字符串name，而不是name代表的值

    } 

    return json;

    }


    18、Div

        特点：默认占一整行，并且一行里面只能显示一个根据浏览器的显示大小

        div的高度是由div中的内容来决定的。


    19、span

        特点：大小由内容来决定，并且一行里面可以显示多个。宽度和高度都是由内容来决定。（行内元素，块级元素。）



### 标签的分类：

    双标签：有开始有结束，开始和结束之间是存在内容

    <h1></h1>,<p></p>

    单标签：只有一个标签，自己闭合自己。

    <hr /> ,<br /> ,<base/>

### DOCTYPE:文档类型

    DTD(Document Type Definition):文档类型定义

    声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范.

### xHtml(html2.0版本，是一种相对html语法更加严谨的hmtl)

    在使用DOCTYPE的时候建议使用html5的类型。每个页面都要设置一个doctype，如果不设置，

    浏览器会默认开启quirks mode（怪异模式）解析（quirks mode（怪异模式）是浏览器为了兼容很早之前针对旧版本浏览器设计、

    并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。

### Html中空格的合并现象：

    特点：无论在页面有同时出现多少个空格，缩进，换行，将来浏览器在解析的时候只会当一个空格显示。


    结论：html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。

###    SEO与标签的语义化：

    作用：用来优化网站，使用网站在搜索引擎上的排名先前。

    语义化的好处：

    01对搜索引擎的友好（将来网络爬虫进入页面之后可以很方便的得到页面的重要信息。）

    02提升用户体验（结构良好的文档都能向用户传达可视化的语义）

    03利于代码的可读、维护、提高开发效率.

### form


    <form action="form_action.asp" method="get">

      <p>First name: <input type="text" name="fname" /></p>

      <p>Last name: <input type="text" name="lname" /></p>

      <input type="submit" value="Submit" />

    </form>


    <form> 标签用于为用户输入创建 HTML 表单。


    表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

    表单用于向服务器传输数据。


    form 元素是块级元素，其前后会产生折行。



属性 | 值 | 描述

---|---|---

accept-charset | charset_list | 规定服务器可处理的表单数据字符集

action | URL | 规定当提交表单时向何处发送表单数据。

autocomplete | on off | 规定是否启用表单的自动完成功能。

enctype | application/x-www-form-urlencoded multipart/form-dat text/plain | 规定在发送表单数据之前如何对其进行编码。

method | get post | 规定用于发送 form-data 的 HTTP 方法。

name | form_name | 规定表单的名称。

novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证。

target | form_name | 规定在何处打开 action URL。

### input属性

    input可以通过设置minlength maxlength限制输入的长度

    <input  maxlength="20" value="" required="">

属性 | 值 | 描述

---|---|---

accept | mime_type | 规定通过文件上传来提交的文件的类型

alt | text | 定义图像输入的替代文本。当图片不显示是显示该文字

autocomplete | on off | 规定是否使用输入字段的自动完成功能。

formenctype | application/x-www-form-urlencoded multipart/form-dat text/plain |覆盖表单的 enctype 属性。（适用于 type="submit" 和 type="image"）

autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）

checked | checked | 规定此 input 元素首次加载时应当被选中。。

disabled | disabled | 当 input 元素加载时禁用此元素。

formaction | URL | 覆盖表单的 action 属性。（适用于 type="submit" 和 type="image"）。

formmethod | get post | 覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"）

formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。

height | pixels % | 定义 input 字段的高度。（适用于 type="image"）

list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。

max | number  date| 规定输入字段的最大值。请与 "min" 属性配合使用，来创建合法值的范围。

min | number  date| 规定输入字段的最大值。请与 "max" 属性配合使用，来创建合法值的范围。

maxlength | number | 规定输入字段中的字符的最大长度

multiple | multiple | 如果使用该属性，则允许一个以上的值。

name | field_name | 定义 input 元素的名称。

pattern | regexp_pattern | 规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

readonly | readonly | 规定输入字段为只读。

required | required | 指示输入字段的值是必需的。

size | number_of_char | 定义输入字段的宽度。

src | URL | 定义以提交按钮形式显示的图像的 URL。

step | number | 规定输入字的的合法数字间隔。

type | button checkbox file hidden image password radio reset submit text | 规定 input 元素的类型。

value | value | 规定 input 元素的值。

width | pixels % | 定义 input 字段的宽度。（适用于 type="image"）

    <!--type-->

    1. button  定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

        <input type="button" /> 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

        <input type="button" value="Click me" onclick="msg()" />

    2. checkbox 定义复选框

        <input type="checkbox" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

        <input type="checkbox" name="vehicle" value="Bike" /> I have a bike

        <input type="checkbox" name="vehicle" value="Car" /> I have a car

    3. file 定义输入字段和 "浏览"按钮，供文件上传。

        <input type="file" /> 用于文件上传。

        <input type="file" />

    4. hidden 定义隐藏的输入字段。

        <input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

        <input type="hidden" name="country" value="Norway" />

    5. image

        定义图像形式的提交按钮。

        <input type="image" /> 定义图像形式的提交按钮。必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。

        <input type="image" src="submit.gif" alt="Submit" />

    6. password

        定义密码字段。该字段中的字符被掩码。

        <input type="password" /> 定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。

    7. radio 定义单选按钮。

        <input type="radio" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

        <input type="radio" name="sex" value="male" /> Male

        <input type="radio" name="sex" value="female" /> Female

    8. reset  定义重置按钮。重置按钮会清除表单中的所有数据。

    9. Submit 

        <input type="submit" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

        <form action="form_action.asp" method="get">

            Email: <input type="text" name="email" />

            <input type="submit" />

        </form>



    <!--step step 属性规定输入字段的合法数字间隔（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）-->

    <form action="demo_form.asp" method="get">

      <input type="number" name="points" step="3" />

      <input type="submit" />

    </form>

    <!--src 下面的表单拥有两个输入字段以及一个图像形式的提交按钮：-->

    <form action="form_action.asp" method="get">

      <p>First name: <input type="text" name="fname" /></p>

      <p>Last name: <input type="text" name="lname" /></p>

      <input type="image" src="submit.jpg" alt="Submit" align="right" />

    </form>


    <!--size 下面这个 HTML 表单分别有两个输入字段，宽度分别是 35 个字符和 18 个字符：-->

    <form action="form_action.asp" method="get">

      <p>Email: <input type="text" name="email" size="35" /></p>

      <p>PIN: <input type="text" name="pin" maxlength="18" size="18" /></p>

      <input type="submit" value="Submit" />

    </form>


    <!--required-->

    <form action="demo_form.asp" method="get">

        Name: <input type="text" name="usr_name" required="required" /> <input type="submit" />

    </form>


    <!--accept-->

    <form>

      <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

    </form>


    <!--multiple-->

    <form action="/example/html5/demo_form.asp" method="get">

        选择图片：<input type="file" name="img" multiple="multiple" />

        <input type="submit" />

    </form>

    <p>请尝试在浏览文件时选取一个以上的文件。</p>


    <!--类似百度搜索的时候 有下拉提示-->

    <form action="/example/html5/demo_form.asp">

    网页：<input type="url" list="url_list" name="link" />

    <datalist id="url_list">

    <option label="W3School" value="http://www.w3school.com.cn" />

    <option label="Google" value="http://www.google.com" />

    <option label="Microsoft" value="http://www.microsoft.com" />

    </datalist>

    <input type="submit" />

    </form>


    <!--input form属性颜色-->

    <form action="/example/html5/demo_form.asp" method="get" id="form1">

    First name: <input type="text" name="fname" /><br />

    <input type="submit" value="提交" />

    </form>


    <p>下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。</p>


    Last name: <input type="text" name="lname" form="form1" />


    <!--autofocus-->

    <form action="demo_form.asp">

      First name: <input type="text" name="fname" autofocus><br>

      Last name: <input type="text" name="lname"><br>

      <input type="submit">

    </form>


    <!--height width  type="image"-->

    <form action="/example/html5/demo_form.asp" method="get">

      First name: <input type="text" name="fname" /><br />

      Last name: <input type="text" name="lname" /><br />

      <input type="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>

    </form>

    <!--max-->

    <form action="/example/html5/demo_form.asp" method="get">

        Points: <input type="number" name="points" min="0" max="10" />

        <input type="submit" />

    </form>


    <!--name-->

    <form action="form_action.asp" method="get">

      <p>Name: <input type="text" name="fullname" /></p>

      <p>Email: <input type="text" name="email" /></p>

      <input type="submit" value="Submit" />

    </form>

    <!--pattern-->

    <form action="/example/html5/demo_form.asp" method="get">

        国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"

        title="三个字母的国家代码" />

        <input type="submit" />

    </form>


    <!--readonly-->

    <form action="/example/html/form_action.asp" method="get">

      <p>Name:<input type="text" name="email" /></p>

      <p>Country:<input type="text" name="country"

      value="China" readonly="readonly" /></p>

      <input type="submit" value="Submit" />

    </form>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,440评论 5赞 467
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,814评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,427评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,710评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,625评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,014评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,511评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,162评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,311评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,989评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,583评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2赞 339

推荐阅读更多精彩内容

  • html基础笔记
    学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    淡淡疯阅读 1,254评论 0赞 3
  • 01 --- HTML 基础标签
    学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    Mr大喵喵阅读 1,379评论 0赞 4
  • HTML基础学习笔记
    原 Blog 链接：HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含： pc...
    任凱阅读 1,376评论 0赞 5
  • 她是如何被父母剥夺了自己的人生
    “你对这个世界绝望过吗？” 写下这篇文章之前我想了很久，因为它可能会伤害到一些人，但最终我还是觉得应该写下来。 因...
    自由女青年阅读 413评论 0赞 3
  • 来简书的第一天
    无意中发现这样一个特别的app，简书。我首先就是被这两个字所吸引。进来后才发现里面的内容如此丰富。 ...
    秀坨坨阅读 97评论 0赞 0