html基础知识

认识前端

• 前端就是利用html，css，js等技术将效果图生成网页

认识网页

• 网页由文字，图片，输入框，视频，音频，超链接等组成

• w3c是web标准

  • html 结构标准
  • css 表现标准
  • js 行为标准

• 浏览器内核（渲染引擎，渲染引擎是兼容性问题出现的根本问题）

  • IE trident
  • 谷歌/欧鹏 blink
  • 火狐 gecko
  • 苹果 webkit

• url地址

  

• Html 与htm是一样的，后缀名不能决定文件格式，只能决定打开文件打开的方式

标签

1.单标签

换行标签 <br />
水平线标签 <hr />

2.双标签

段落标签 <p></p>
标题标签 <h1></h1>,h1~h6,h1只能出现一次
文本标签 <font size=" " color=" "></font>
文本格式标签：
文本加粗标签 <strong></strong> <b></b>
文本倾斜标签 <em></em> <i></i>
删除线标签 <del></del> <s></s>
下划线标签 <ins></ins> <u></u>

3.图片标签

<img src=" " alt=" " title=" " width=" " height=" "/>
alt 替换文本，图片不显示的时候，显示的文字
title 提示文本，鼠标放到图片上显示的文字
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放

4.超链接

<a href=" " title=" " target=" "></a>
title    提示文本   鼠标放到链接上显示的文字
target="_self"    默认值    在自身页面打开（关闭自身页面，打开链接页面）  
target="_blank"   打开新页面 （自身页面不关闭，打开一个新的链接页面）

• 锚链接

1.先定义一个锚点
    <p id="sd"></p>
2.超链接到锚点
    <a href="#sd">回到顶部</a>

• 空链

<a href="#">空链</a>

• 优化链接写法，让所有的超链接都在新窗口打开

<base target="_blank"  />
此标签必须位于head标签内部
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL

!(http://www.w3school.com.cn/html5/tag_base.asp)

5.特殊字符

6.列表

• 无序列表（ul>li)

    type="square" 小方块
    type="disc" 实心小圆圈
    type="circle" 空心小圆圈

• 有序列表 (ol>li)

    type="1,a,A,i,I" type的值可以为1,a,A,i,I
    start="3"  决定了开始的位置

• 自定义列表

    dl>dt+dd

7.音乐标签

    <embed src="" type="" hidden="true">

!(https://www.cnblogs.com/lgx5/p/5714494.html)

8.滚动

<marquee behavior="" direction=""></marquee>
中间的内容可以为图片或者文字
属性：height高度 width宽度 bgcolor背景颜色

behavior：设定滚动的方式
alternate：表示在两端之间来回滚动
scroll：由一端滚动到另一端，会重复
slide：由一端滚动到另一端，不会重复

direction：设置滚动的方向
dowm，left，right，up

loop：设置滚动的次数，-1一直滚下去

!(https://www.cnblogs.com/jianmeng/p/7022288.html)

引入的内容

• 关键字

    <meta name="keywords" content="关键字的内容">

• 网页描述

    <meta name="description" content="网页描述的内容">

• 网页重定向

    <meta http-equiv="refresh" content="5（秒）;网页url">

• 链接外部样式表

    <link rel="stylesheet" href="链接">

• 设置icon图标（页面标签上的小图标）

    <link rel="icon" href="链接">

表格

主要用来展示数据，是对网页重构的补充

    <table border="1 边框" width="100 宽" height="100 高" cellspacing="2 单元格与单元格之间的距离" cellpadding="2 内容与边框的距离" align="center" bgcolor="背景颜色">
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

    align="left  |  right  |  center"  
    如果直接给表格用align="center"  表格居中
    如果给tr或者td使用，tr或者td内容居中

表格的标准结构需要有

    <thead></thead>,<tbody></tbody>,<tfoot></tfoot>

• 表头

    <caption>表头</caption>,写在table内

• 单元格合并

    colspan="2"  合并同一行上的单元格
    rowspan="2"  合并同一列上的单元格

• 表格标题

    <th></th>用法和th是一样的，文字加粗文本居中对齐

• 边框颜色

    bordercolor="red"

• 内容垂直对齐方式

    valign="top|middle|bottom"

表单

• 表单域

    <form action="处理信息的地址" method="get|post"></form>

• 文本输入框

    <input type="text" maxlength="6 限制输入字符的长度" readonly="readonly" disabled="disabled" name="输入框的名称" value="输入框的内容">
    readonly 将输入框设置为只读状态，不能编辑
    disabled 输入框未激活状态

• 密码输入框

    <input type="password">

• 单选框

    <input type="radio" name="gender" checked="checked">
    注意：只有当name值设置相同的时候，才能实现单选效果

• 下拉列表

    <select multiple="multiple">
        <option></option>
        <option selected="selected"></option>
    </select>
    multiple 将下拉列表设置为多选项
    selected 默认选中项目

    <optgroup label="分组名称">
        <option></option>
        <option></option>
    </optgroup>
    optgroup 对下拉列表进行分组

• 多选框

    <input type="checkbox" checked="checked">

• 多行文本框

    <textarea cols="30" rows="10"></textarea>
    cols 控制字符的长度
    rows 控制输入的行数

• 文件上传

    <input type="file">

• 文件提交按钮

    <input type="submit">

• 普通按钮

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

• 图片按钮

    <input type="image" src="按钮.jpg">
    图片按钮可以实现信息提交功能

• 重置按钮

    <input type="reset">
    将信息重置到默认的状态

• 表单信息分组

    <form action="1.php">
        <fieldset>对表单信息进行分组
            <legend>表单信息分组名称</legend>
        </fieldset>
    </form>

• html5补充表单控件

        <!--网址控件-->
        <input type="url">
        <!--日期控件-->
        <input type="date">
        <!--时间控件-->
        <input type="time">
        <!--邮件控件-->
        <input type="email">
        <!--数字控件-->
        <input type="number" step="5">
        <!--滑块控件-->
        <input type="range">
  

## 标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

    标签语义化概念：
    根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护

示例：
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

转载于:https://my.oschina.net/u/3160839/blog/813035