木心

毕竟几人真得鹿，不知终日梦为鱼

导航

html基础

目录：

    html_01

 1.认识前端和网页
 2.认识html
 3.标签
 4.图片表签
 5.相对路径和绝对路径
 6.超链接
 7.锚点(锚链接)
 8.html的特殊字符
 9.列表
10.多媒体标签
11.滚动标签
12.案例1---多媒体和滚动标签的使用

　　html_02

1.<meta>标签
2.<link>标签 链接外部样式表文件
3.表格
4.练习--课程表(练习跨行跨列，细线表格)           
5.表单
6.表单信息分组
7.一些html5定义的表单控件  
8.标签语义化

 

html_01
1.认识前端和网页  <--返回目录
    * 前端就是将效果图生成网页，利用html+css+js等技术。
    * 网页由文字、图片、输入框、视频、音频、超链接等组成。
    * web标准
        - w3c组织（万维网联盟）
        - html   结构标准    相当人的身体
        - css    表现标准    相当与给人化妆 变的更漂亮
        - js     行为标准    想当与人在唱歌，页面更灵动。
    * 浏览器内核
        - 浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容及页面的格式
        - 渲染引擎：是兼容性问题出现的根本原因
    * url地址：就是咱们说的网址
    
2.认识html    <--返回目录
    * html：超文本标记语言Hyper text markup language
    * Html结构标准
        <!doctype html>       声明文档类型
        <html>                  根标签
            <head>              头标签
                <title></title> 标题标签
            </head>
            <body>              主体标签
            </body>
        </html>

    * Html 与htm是一样的
        - 后缀名不能决定文件格式，只能决定打开文件打开的方式。
        
    * 开发工具
        - Dw  历史悠久，设计师使用。
        - Sublime   轻量级    有很多好用的插件。
        - Webstorm  重量级    太过智能。

    * sublime快捷键
        Html:xt+tab    Html结构代码
        tab    补全标签代码
        Ctrl+shift+d    快速复制一行
        Ctrl+shiif+k    快速删除一行
        Ctrl+鼠标左键单击    集体输入
        Ctrl+h    查找替换
        Ctrl+f    查找
        Ctrl+/    注释
        Ctrl+L    快速选择一行
        Ctrl+shift+↑（↓）    快速上移（下移）一行
        F11    全屏 火狐也可以用

    * 查看--布局  同时打开多个窗口

3.标签    <--返回目录
    * <!-- 注释 -->
        - 快捷键ctrl+/
        - 页面不可见，但是打开源码可见
        
    * 换行 <br/>
    
    * 水平线标签  <hr />
    
    * 上标下标：2<sup>3</sup>  h<sub>2</sub>0
    
    * 段落标签 <p>文本内容</p>
        - 特点：上下自动生成空白行。<br>换行不会生成空白行。
        
    * 标题标签
        - h1-h6  取值到h6
        - h1：字号最大，在一个页面里只能出现一次。

    * 文本标签 <font size="6" color="red">文本内容</font>
        - 早期会用，以后不用
    
    * 文本格式化标签
        - 文本加粗标签 <strong></strong>   <b></b>  工作里尽量使用strong   word中快捷键ctrl+b
        - 文本倾斜标签 <em></em>   <i></i> 工作里尽量使用em    word中快捷键ctrl+i
        - 删除线标签 <del></del>   <s></s>   工作里尽量使用del
        - 下划线标签 <ins></ins>   <u></u>    工作里尽量ins       word中快捷键ctrl+u
        - 注意：之所以工作里使用<strong></strong>  <em></em> <del></del>  <ins></ins>  是因为更有语义化。

4.图片表签    <--返回目录
    * 图片表签 <img src="" alt="" title="" width="300" height="500"/>
        - src:图片的路径
        - alt：图片链接失效后显示的文本，SEO有用
        - title：鼠标悬停显示的文本，也叫候补文本
        - width:宽
        - height：高
        - 图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
    
5.相对路径和绝对路径   <--返回目录
    * 相对路径：相对于文件自身出发，就是相对路径。
        - 文件和图片（html文档）在同一个目录(文件夹)，直接写文件名。
          <img src="lzl.jpg"/>
        - 图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
          <img src="志玲/lzl.jpg"/>
        - 图片（html）在文件的上一级目录里，../图片（html）名称
          <img src="../lzl.jpg"/>
        - 图片在文件的上一级的其他目录里，../文件夹名称/图片名称
          <img src="../志玲/lzl.jpg"/>
    * 绝对路径
        - 电脑上的绝对路径，一般不用 <img src="d:\lzl.jpg"/>
        - 互联网上的绝对路径 <img src="http://"/>

6.超链接   <--返回目录
    * <a href="" target="" title=""/>
        - href:跳转的路径
            <a href="a/a.jpg">链接</a>  默认在当前页面打开
        - target="_self"  在当前页面打开，默认
        - target="_blank" 在新窗口打开,自身页面不关闭
        - title    提示文本   鼠标放到链接上显示的文字
    
7.锚点(锚链接)    <--返回目录
    * 先定义一个锚点<p id="sd">
    * 超链接到锚点  <a href="#sd">回到顶部</a>
    
    * 空链:不知道链接到那个页面的时候，用空链
        <a href="#"/>
    * 压缩文件下载  不推荐使用
        <a href="a.rar">文本</a>
    * 超链接优化写法
        <base target="_blank">让所有的超链接都在新窗口打开

8.html的特殊字符     <--返回目录
       <   &lt;
       >   &gt;
       空格 &nbsp;
       &    &amp;      

 
9.列表    <--返回目录
    * 无序列表
        <ul type="">
            <li></li>
            <li></li>
        </ul>
        - type="disc" 默认实心圆
        - type="circle" 空心圆
        - type="square" 实心方块
    
    * 有序列表
        <ol type="1" start="3">
            <li></li>
            <li></li>
        </ol>
        - type="1或a(A)或i(I)"  默认是1
        - <ol type="1" start="3">从3开始
        - <ol type="a" start="3">从c开始
    
    * 自定义列表
        <dl>
            <dt>小标题</dt>    
            <dd>解释标题</dd>   
            <dd>解释标题</dd>   
        </dl>

10.多媒体标签    <--返回目录
    * embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等
    * <embed src="" hidden="true" autostart="true" loop="true"/>
        - src：相关声音文件的URL，该属性是<embed>标签必须的
        - hidden：属性值true表示隐藏构造器，no表示显示，默认为no
        - loop：loop属性的属性值是音频文件重复播放的整数次数，设置为"-1"或true则无限次循环播放，false不循环播放
        - autostart：该属性用来控制多媒体内容是否自动播放。(属性值：true,false)，默认true自动播放
        - palette=color|color：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用 | 隔开。
            color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent （透明）。
        - 更多详细属性见"http://www.maiziedu.com/article/28525/"
        例子：
            <span style="font-family:SimHei;font-size:18px;">
                <embed src="Faded123.mp3" loop="-1" hidden="no" autostart="false" width="" height="">  
                </embed>  
            </span>  
            
11.滚动标签    <--返回目录

    
12.案例1---多媒体和滚动标签的使用   <--返回目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="1.css">  
    <link rel="icon" href="1.icon">
    <link rel="dns-prefetch" href="http://www.itcast.cn">
</head>

<body background="cun.jpg">
    <embed src="1.mp3" hidden="false" autostart="true" loop="true">
    
    <marquee behavior="alternate" direction="left" loop="-1" scrolldelay="100">
         背景音乐不错
    </marquee>
    
    <marquee behavior="alternate" direction="left">
        <img src="1.png">
    </marquee>
    
    <marquee behavior="scroll" direction="right" >
        <img src="2.png">
    </marquee>  
</body>
</html>


html_02
1.<meta>标签   <--返回目录
    <meta charset="utf-8"> 或 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="xxx,xxx" />
    <meta name="description" content="xxx" />
    <meta http-equiv="refresh" content="5;http://www.baidu.com"/> 定时跳转(重定向)

2.<link>标签 链接外部样式表文件     <--返回目录
    <link rel="stylesheet" type="text/css" href="css/a.css">
    
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 相对路径
    或
    <link rel="shortcut icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico">  网络URL，绝对路径

3.表格       <--返回目录
    * 表格的标准结构
        <table>
            <caption></caption> 表标题
            <thead>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>

    * 常用属性
        border="1"  边框宽度
        bordercolor="red" 边框颜色
        width="500"  宽度
        height="300" 高度
        cellspacing="0"   单元格与单元格的距离
        cellpadding="2"   内容距边框的距离
        valign="top | middle | bottom"  垂直对齐方式
        align ="left | right | center"  水平对齐方式
            - 如果直接给表格用align="center"  表格居中
            - 如果给tr或者td使用，tr或者td内容居中
        bgcolor="red"  背景颜色
        
    * colspan=”2”  合并同一行上的单元格
    * rowspan=”2”  合并同一列上的单元格
    * 表格第一行 <th></th>用法和td一样，效果：加粗居中

    * 细线表格
        <table width="800"  height="400" border="0" bgcolor="green" cellspacing="1">
                  <tr bgcolor="white">
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                  </tr>
                  <tr bgcolor="white">
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                  </tr>
                  <tr bgcolor="white">
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                  </tr>
                  <tr bgcolor="white">
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                  </tr>
        </table>

4.练习--课程表(练习跨行跨列，细线表格)       <--返回目录
     <table width="300" height="200"  bgcolor="green" cellspacing="1" align="center">
           <caption>课程表</caption>
           <tr bgcolor="white">
                <th colspan="2" width="60"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
           </tr>

           <tr bgcolor="white">
                 <td rowspan="2" width="50">上午</td>
                 <td width="30">1</td>
                 <td>语文</td>
                 <td>数学</td>
                 <td>物理</td>
                 <td>化学</td>
                 <td>生物</td>
               
           </tr>
           <tr bgcolor="white">
                 <td>2</td>
                 <td>体育</td>
                 <td>音乐</td>
                 <td>几何</td>
                 <td>画画</td>
                 <td>舞蹈</td>
               
           </tr>
           <tr bgcolor="white">
                 <td rowspan="2">下午</td>
                 <td>1</td>
                 <td>体育</td>
                 <td>画画</td>
                 <td>音乐</td>
                 <td>语文</td>
                 <td>音乐</td>
               
           </tr>

           <tr bgcolor="white">
              <td>2</td>
                <td>英语</td>
                <td>舞蹈</td>
                <td>体育</td>
                <td>唱歌</td>
                <td>体育</td>
           </tr>
     </table>
            
5.表单     <--返回目录
    * 表单的作用是收集信息
    * <form action="" method="get|post"></form>
        属性：action:处理信息
        Method=”get | post”   
    
    * 文本输入框<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="前端"/>
        maxlength="6"    限制输入字符长度
        readonly=”readonly”  将输入框设置为只读状态（不能编辑）
        disabled="disabled"  输入框未激活状态
        name="username"   输入框的名称
        value="大前端"     将输入框的内容传给处理文件
                    
    * 密码输入框<input type="password" name="pwd"/>
        - 文本输入框的所有属性对密码输入框都有效。
                    
    * 单选框<input type="radio" name="gender" value="male" checked="checked"/>男&nbsp;
            <input type="radio" name="gender" value="female"/>女
        - 只有将name的值设置相同的时候，才能实现单选效果
        - checked="checked" 设置默认选择项
            
    * 下拉列表
        <select name="" multiple="multiple" size="2">
            <option>河北</option>
            <option>江西</option>
            <option selected="selected">北京</option>
        </select>
            
        - multiple="multiple"：可以多选，并且默认就显示了size=""设置的个数
            ** 不设置multiple，默认只显示第一个选项，或有selected="selected"属性的选项
        - selected="selected"：默认选中的
        - size="2":显示2个，多余的选项通过滚动条查看
            
        - 分组:将选项进行分组
            <select id="selectid" name="select">
                <optgroup label="北京市">
                    <option>aaa</option>
                    <option>bbb</option>
                    <option>ccc</option>
                </optgroup>
                <optgroup label="深圳市">
                    <option>aaa</option>
                    <option>bbb</option>
                    <option>ccc</option>
                </optgroup>
            </select>        
            
    - 多选框<input type="checkbox" name="" value="" checked="checked"></input>
            
    - 多行文本框<textarea cols="130" rows="10"></textarea>
        cols  控制输入字符的长度。
        rows  控制输入的行数
        
    - 文件上传<input type="file"/>

    - 提交控件
        <input type="button" value=""/>普通按钮，配合js使用
        <input type="submit" value=""/>提交按钮
        <input type="reset" value=""/>重置按钮
        <input type="image" src="a.jpg"/>图片按钮

6.表单信息分组     <--返回目录
    * <fieldset></fieldset>    对表单信息分组
      <legend></legend>      表单信息分组名称

      用法：
          <form>
              <fieldset>
                <legend>表单信息分组名称</legend>
                <input >各种表单控件
              </fieldset>
          </form>
            
7.一些html5定义的表单控件     <--返回目录
    * 网址控件<input type="url">
        - 空也能提交，输入必须是网址，必须包含htt://否则提示
    
    * 日期控件<input type="date" name="date">    
        - 在火狐浏览器下，默认会有一个日期插件进行选择，最后get提交后在url后添加date=2018-05-22
            
    * 时间控件<input type="time" name="time">  
        - 在火狐浏览器下，格式：上午 05:10，最后get提交后在url后添加time=05%3A10
            
    * 邮件控件<input type="email">

    * 数字控件<input type="number" step="5">
    
    * 滑块控件<input type="range" step="10">
    
8.标签语义化     <--返回目录
    * 标签语义化概念：根据内容的结构化，选择合适的标签。
            
    * 标签语义化意义：
        - 网页结构合理
        - 有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
        - 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
        - 便于团队开发和维护
        
    * 好的语义化的网站标准就是去掉样式表后，网页依然结构清晰，比如w3school
    
    * 标签语义化的注意事项
        1：尽可能少的使用无语义的标签div和span；
        2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
        3：不要使用纯样式标签，如：b、font、u等，改用css设置。
        4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；
 -----------------------------------------------------------------------

1.标签可以使用属性align="left/center/right"，左右对齐方式
    <p align="center">文本</p>  等价于<===> <center><p>文本</p></center>  
    <center>在html5中被废弃。可以用，但不推荐使用

2.标签可以使用属性bgcolor="red"来设置背景色
    <p bgcolor="red">文本<p/>
    
3.frameset替换了body，iframe不替换body
    - iframe是在一个html页面中嵌套一个html
    - 可以使用frameset进行网页布局
    - 也可以使用table+iframe进行网页布局

---

posted on 2019-12-29 11:23  wenbin_ouyang  阅读(301)  评论(0)  编辑  收藏  举报