HTML学习笔记

HTML5学习笔记

 

这是原作者自己的整理:https://www.gitbook.com/book/li-xinyang/frontend-notebook/details

1.HTML:(Hyper Text Markup Language),超文本标记语言,用于标记,页面中的内容:文字,图片,音视频内容,只是单纯的显示,需要修饰就要用到CSS.

 

2.HTML文档的基本结构

 

<!DOCTYPE html>//首行定格书写,声明文档类型
<html lang=“en”>//语言类型
<head> //头部
    <meta charset=“UTF-8”>//编码类型
    <title>Title</title>//文档标题,浏览器窗 口显示的那个标题

 

<meta name="keywords" content="websit search keyword">
<meta name="description" content="website discription">//两个结合给搜索引擎抓取,SEO
<meta name="viewport" content="width=device-width,initial-scale=1.0">//移动端浏览器的宽高和缩放
<link href="css.css">//引入外部的CSS样式


</head>//结束标签
<body>//文档主体部分

</body>
</html>

 

3.一些重要的属性

 

id: <div id=“unique-string”></div>整篇文档只能有一个

 

class:<div class=“div”>class</div>一个类群,可重复出现

 

style:尽量避免使用内嵌样式

title:对对应元素的描述

 

   <!--常用标签的作用
    <body>页面的主体部分
    <header>某个整体的头部
    <aside>正文的辅助侧边栏
    <nav>导航部分
    <article>内容整体,比如一篇文章的内容
    <section>某个独立小块
    <footer>文档或者某个部分的尾部
   -->
    <!--默认的超链接-->
    <a href="http://www.baidu.com" title="sample link">默认的链接</a>
    <!--当前窗口显示-->
   <a href="http://sample.com" title="sample link" target="_self">sample</a>
   <!--新窗口显示 -->
   <a href="http://sample.com" title="sample link" target="_blank">blank link</a>
    <!--iframe中打开链接-->
    <a href="http://sample.com" title="sample link" target="iframe-name">sample</a>
    <iframe name="iframe-name" frameborder="0"></iframe>

    <!--页面中的锚点-->
    <a href="#id">Anchor point</a>
    <section id="id">Anchor content</section>

    邮箱和电话
    <a href="mailto:sample@qq.com" title="Email">Contact US</a>

   <!--多人分发-->
   <a href="mailto:sample@xx.com?cc@qq.com">Contacts</a>

    <!--抄送主题和内容-->

    <a  title="email" href="mailto:sample@dd.com&subject=help&body=body content">Contacts</a>
    <!--电话-->
    <a href="tel:9999" title="phone">phone</a>

    <!--4.内容组合标签-->
    <div>块</div>
    <p>段落</p>
    <ol>有序列表</ol>
    <ul>无序列表</ul>
    <dl>一个单元格</dl>
    <pre>保存模块化的内容,比如代码</pre>
    <blockquote>引用大段的文字</blockquote>

    <!--引用-->
    <cite>引用作品的名字或者作者的名字</cite>
    <q>引用小段文字</q>

    <canvas>基于像素,性能要求比较高,用于实时显示数据</canvas>
    <svg>矢量图形图像</svg>

    <!--热点区域标签-->
    <!--img标签中套用map及area可以实现点击某部分图片触发一个连接,另外一部分对应另外的连接-->
    <img src="mama.jpg" width="100" height="100" usemap="#map">
    <map name="map">
        <area shape="rect" coords="0,0,50,50" href="index.html" alt="热点1">
        <area shape="circle" coords="100,100,12" href="" alt="redian2">
    </map>

    <!--表格-->
    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>Header</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>data</td>
                <td>data222</td>
            </tr>
        <tr>
            <td colspan="2">11</td>
            <td></td>
        </tr>

        <tr>
            <td rowspan="2">11</td>
            <td></td>
            <td></td>
        </tr>

        </tbody>
    </table>


    <!--表单-->
    <form action="website_sumbit" method="get" accept-charset="utf-8">
        <fieldset>
            <legend>title</legend>

            <!--添加标签说明的方法-->
            <label><input type="text" name="name" value="yourname">名字</label>
            <label for="input-id">另外一种添加标签说明</label>
            <input type="text" id="input-id">
        </fieldset>

        <fieldset>
            <legend>title</legend>
            <!--只读文本框-->
            <input type="text" name="readonly" readonly>

            <!--隐藏文本框,可以提交隐藏数据-->
            <input type="tel" name="hidden-info" value="hiden-value" hidden>

        </fieldset>
        <button type="submit"></button>
        <button type="reset"></button>
    </form>

 <!--其他的文本输入框-->

<textarea>多行输入</textarea>
<select>选择下拉框
    <option>1</option>
    <option>2</option>
</select>

<!--input标签的类型-->

<!--button,checkbox,color,date,datetime,datetime-local,email,file,hidden-->
<!--image,month,number,password,radio,range,reset,search,sumbit,tel,time-->
<!--url,week.-->
<!--语义化:指用合适的标签标识适当的内容,可以起到搜索引擎优化-->
<!--可以提高可访问性,代码的可读性-->
<!--即:在正确的地方用正确的标签-->

<!--实体字符:用来在代码中以实体代替与HTML语法相同的字符,避免解析错误-->
<!--有两种表示方法:&加实体字符,名称,另外&加实体字符序号-->

&quot;&#34;//双引号
&amp;&#38;//&符号
&lt;&#60;//小于号
&gt;&#62;//大于号
&nbsp;&#160;//空格
&amp;&#12288;//中文全角空格



IE8一下版本兼容H5标签,使用js来创建一个没有的元素
或者shiv解决
<script>
    document.createElement("headr");
</script>

 

 

 

5.CSS(Cascading Stylesheet)层叠样式表,用来修饰HTML元素,相当于装饰.在H5中可以实现简单的动画

<!--导入外部样式表-->
<link href="css.css" rel="stylesheet">
<!--内部样式表-->
<style>

    p{

        margin: 10px;
    }

    .ul span{
        positon:relative;
        height:100px;
        overflow:hidden;
    }

    .pic{
        -webkit-transition: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
</style>

<!--内嵌样式-->
<p style="color: red;">red Text!!!!</p>

<!--语法
/*选择器
   */
.m-userlist{
    /*属性声明*/
   margin:0 0 30px;
   /*属性名:属性值*/
   }-->



<!--浏览器私有属性:(平台决定)
前缀
Chrome,Safari:-webkit
Firefox:-moz-
IE:-ms
Opera:-o- -->

<!--属性值语法-->
margin:[<length> | <percentage> | auto]{1,4}

       /*基本元素:<length>,<percentage>,auto*/
        /*组合符号:[],|*/
    /*数量符号:{1,4}*/


CSS @规则
     @import "subs.css"

     @chartset "utf-8"
    @media print{
            /*property:value*/
           }
@keyframes fadein{
            /*property:value*/
           }


  @标示符 内容;
  @标识符 内容{}

           常用规则
           @media(响应式布局)
           @keyframes(CSS动画)
            @font-face(外部字体)

 

 

6.常用的选择器

选择器:
种类:
   标签选择器 p{}
    类选择器 .className{}
    id选择器 #idName{}
    通配符 *{}

属性选择器:
[attr] or [attr=val] ===> #nav{}===[id=nav]{}
[attr~=val]属性包含value值的元素
[attr|=val]属性除去val开头的属性值
[attr^=val]属性val开头的元素
[attr$=val]属性val结束
[attr*=val]属性包含val的元素


<!--常用伪类选择器-->
:或者::开头
:link,:visited,:hover,:active,:enabled,:disabled
:checked,:first-child,:last-child,
   :nth-child(even/odd)//父元素下第n个且是element的元素
:nth-last-child(n[0...])
:only-child仅选择唯一的元素
:only-of-type
:first-of-type
:last-of-type
:nth-of-type(even)//父元素下第n个element元素,
:nth-last-of-type(2n)

<!--不常用的伪类-->
:empty,:root,:not,:target,:lang()

::first-letter,第一个字母
::first-line
::selection用户选中的内容

<!--组合选择器-->
后代选择器: .main h1{}
子代选择器: .main>h2{}
兄弟选择器: h2+p{}或者h2~p{...}


<!--CSS继承-->
   <!--子元素继承父元素的样式,只有部分能继续,通过文档inherited:yes判断属性是否可以继承-->
<!--知道继承属性-->
color,font,text-align,list-style

<!--非继承属性-->
background,border,position...

样式的优先级计算
a = 行内样式
b = id选择器的数量
c = 类,伪类选择器的数量
d = 标签选择器和伪元素的数量

posted on 2016-03-23 18:37  农场的小伙  阅读(513)  评论(0)  编辑  收藏  举报
Copyright © 2024 农场的小伙
Powered by .NET 8.0 on Kubernetes Powered By: 博客园