美文网首页
(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适

(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适

作者: 魔王哪吒 | 来源:发表于2019-12-01 00:37 被阅读0次
    file

    作者 | Jeskson
    来源 | 达达前端小酒馆

    HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变形,动画效果等。HTML5的介绍,常用的元素和属性,表单相关元素和属性,CSS3新添加的选择器,CSS3新的属性。

    了解HTML5,和现在主流的浏览器的,与基本语法。

    在使用HTML5之前,w3c希望用XHTML来替代HTML,因为HTML与XHTML相比,XHTML是一种更加严格,更加规范的HTML代码,这是因为XHTML要求HTML必须是一种XML文档格式,XML文档是一种结构化文档。

    在XML文档中有且只能有一个根元素,文档中的元素必须由开始标签和结束标签组成,除了是单标签,即为空元素语法,标签之间不能交叉使用,属性值必须用“”括起来。

    当时的HTML文档因为存在大量的不规范,所以文档的编写按照XHTM编写规范进行编写HTML文档,但是由于互联网上存在大量这些不规范的页面,所以就有了一个新的HTML标准,就是HTML5.

    在HTML5中其实并没有那么多的严格要求,但是作为一名程序员要强烈要求自己的书写规范。

    HTML5和HTML4的区别

    HTML4与HTML5的区别

    字符编码的改变:

    HTML4:

    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    

    HTML5:

    <meta charset="utf-8">
    

    HTML5的语法出现就是为了兼容各种不规范的HTML文档,HTML5文档有时可以写成不是一个严格规范的XML文档,但是,还是要强烈要求自己的书写规范。

    HTML5中,某些元素可以省略结束标签,有的元素可以将开始标签和结束标签一起省略,有的元素绝对没有结束标签,标签不再区分大小写,某些标准性的属性可以省略属性值。

    HTML5的好处是,可以解决跨浏览器,跨平台的问题,支持市面上大多浏览器的支持,对前端开发者来说,开发
    HTML+CSS+JavaScript会更加便利,增强了web的应用程序。

    file

    HTML5常用元素和属性

    HTML5保留的常用元素,新增加的常用元素,通用的属性,已经被废弃的元素和属性。

    HTML5保留的常用元素主要的:

    HTML的注解,注解是不会在浏览器中显示的,可以对代码进行解释,有助于其他开发者了解该代码的具体内容。

    html是HTML5的根元素,告诉浏览器自身是一个HTML文档。

    head是用于定义HTML5文档的页面头部分,在head内部的标签主要有base,link,meta,script,styple,title。

    title用于定义文档的页面标题。

    style用于定义文档引入的样式。

    meta用于定义文档的元信息。

    base用于定义文档中所有链接规定的默认地址或者默认目标。

    body用于定义文档的页面主题部分。

    h1~h6用于定义标题。

    p用于定义段落。

    hr用于插入一条水平线。

    br用于插入一个换行符。

    div用于定义文档中的分区或者节,是一个块级元素。

    span与div类似,该元素不换行。

    文本格式化元素

    b用于定义粗体文本,strong用于定义粗体文本,small用于定义小号字体文本,em用于强调文本,i用于定义斜体文本,sub用于定义下标文本,sup用于定义上标文本。

    abbr用于定义一个缩写,是abreviation的缩写,address是用于定义一个地址,blockquote用于定义块引用,q用于定义一个短的引用,code用于定义计算机代码文本,cite用于表示对某个参考文献的引用,del用于定义文档中被删除的文本,ins用于定义文档中插入的文本,kbd用于定义键盘文本,pre用于定义预格式化的文本,samp用于定义样本文本,var用于定义变量。

    超链接与锚点

    HTML5保留了超链接,a标签元素,用于从一个页面跳转到另一个页面,a标签的重要属性为href,它是指向链接的目标。

    在HTML4.01中,a元素可以是超链接,或是锚点,但是在HTML5中,a元素就是超链接,如果没有href属性,那么就只是超链接的占位符。

    介绍两个HTML5新增的属性,为download和media:

    download元素指示浏览器下载URL而不是去导航到它,media规定目标URL是为 什么类型的媒介或是设备进行进化的。

    <a href="http.."></a>
    <a href="" download="">点击下载</a>
    

    列表元素

    ul用于定义无序列表,ol用于定义有序列表,li用于定义列表项目,dl用于定义列表,子元素有dl和dd两种。dt是用于定义标题列表项,dd是用于定义定义列表项目。

    表格元素

    table用于定义表格,caption用于定义表格标题,tr用于定义表格行,子元素用于定义td和th两种,td用于定义单元格,th用于定义单元格,是用于表格的页眉。

    在td元素中是由两个属性的:colspan属性和rowspan属性,表示该单元格横跨多少列和该单元格纵跨多少行。

    tbody用于定义表格主体,子元素有td和th两种,thead用于定义表格表头,子元素有td和th两种,tfoot用于定义表格页脚,子元素有td和th两种。

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title>HTML5</title>
     </head>
     <body>
      <table border="1">
       <thead>
        <tr>
         <th>da</th>
        </tr>
       </thead>
       <tbody>
        <tr>
         <td>da</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
         <td>da</td>
        </tr>
       </tfoot>
      </table>
     </body>
    </html>
    

    col用于表格中一个或者多个列定义属性值,colgroup用于对表格中的列进行组合,以便对其进行格式化。

    mark用于定义高亮文本,time用于显示被标注内容是日期或是时间,24小时时间制,属性有datetime表示此元素的时间和日期,pubtime指示time元素中的日期时间是文档的发布日期。

    文档结构元素,header用于定义文档或是节的页眉,footer用于定义文档或是节的页脚,HTML5新增的结构header,footer除外,还有aside是用于定义文档内的文章,section用于定义文档中的一个区域,nav用于定义页面上的导航链接部分,figure用于定义一段独立的引用,与figcaption配合使用,figcaption用于表示与其相关联的引用的说明或是标题等,是为了提高代码的可阅读性。

    <figure>
     <figcaption></figcaption>
    </figures>
    

    meter表示一个已知最大值和最小值的计数器,form指定meter元素所属的一个或者多个表单,value指定meter元素的当前值,min指定meter元素的最小值,max指定meter元素的最大值,low指定meter元素指定范围的最小值,high指定meter元素范围的最大值,optimum指定meter元素最优值。

    progress表示一个进度条,max指定任务总工资量,value指定已完成的任务量。

    多媒体元素

    audio定义音频,video定义视频

    <audio src="" controls="controls"></audio>
    

    src为设置歌曲的路径

    controls为设置是否使用播放控制

    <video src="" controls="controls"></video>
    

    src为设置视频的路径

    controls为设置是否使用播放控制

    通用属性

    id用于HTML元素中唯一的标识,style用于为HTML元素指定css样式,class用于匹配css样式的class选择器,dir用于设置元素中内容排列的方向,有ltr和rtl两个属性。

    重点属性:

    hidden属性,属性值为true时显示,属性值为false隐藏,display:none等于hidden="true"

    spellcheck属性,设置spellcheck="true",浏览器会对用户输入的文本内容执行输入检查,检查不通过,浏览器会对拼错的单词进行提示。

    表单相关元素和属性

    form元素用于生成输入表单,action用于被提交到的地址,method用于提交表单发送哪种类型的请求,属性值为get或是post,enctype用于指定表单内容编码使用的字符集:

    application/x-www-form-urlencoded
    默认编码方式
    
    multipart/form-data
    
    text/plain
    

    name用于定义表单的唯一名称,target用于定义哪种方式打开目标url,属性值_blank,_self,_top中的一个。

    表单控件:

    type="text"单行文本输入框
    type="password"密码输入框
    type="hidden"隐藏域
    type="radio"单选框
    type="checkbox"复选框
    type="file"文本域
    type="image"图像域
    type="submit"提交按钮
    type="reset"重置按钮
    type="button"按钮
    
    <body>
     <form action="" method="post">
      <label for="username">用户名:</label>
      <input id="username" type="text"/><br/>
      <label>密码:
      <input type="password"/>
      </label>
      <br/>
     </form>
    </body>
    

    select,option,optgroup下拉列表框

    size显示select元素同时显示多少个列表项,multiple是否允许多选,optgroup中的属性,label选取该选项组的标签。

    // button
    <body>
     <form action="" method="post">
      <button type="submit">提交</button><br/>
      <button type="reset">重置</button><br/>
      <button type="button"><img src=""></button>
     </form>
    </body>
    

    表单控件textarea

    textarea属性:cols用于表示文本域的宽度,rows用于表示文本域的高度,readonly用于表示该文本域只能读取。

    <body>
     <form action="" method="get">
      <input type="color" name="color" id="" value="#ff000"/><br/>
      <input type="submit" id="" name="" />
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="time" name="time" id="" value=""/><br/>
      <input type="submit" id="" name=""/>
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="data" name="date" id="" value="" max="205-02-01" min="2019-03-03"/>
      <br/>
      <input type="submit" id="" name=""/>
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="month" name="month" id="" value="" min="1002-02" max="2303-23"/>
      <br/>
      <input type="submit" id="" name="" />
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="week" name="week" id="" value="" min="2322-W01"
      max="3444-w12"/>
      <br/>
      <input type="submit" id="" name="" />
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="email" name="email" id="" value="" multiple="multiple"/>
      <br/>
      <input type="submit" id="" name=""/>
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="number" name="number" id="" value="" max="100" min="0" step="10"/>
      <br/>
      <input type="submit" id="" name="" />
     </form>
    </body>
    

    range类型生成一个拖动条:

    <body>
     <form action="" method="get">
      <input type="range" name="range" id="" value="" max="100" min="0" step="10"/>
      <br/>
      <input type="submit" id="" name=""/>
     </form>
    </body>
    
    <body>
     <form action="" method="get">
      <input type="search"/>
      <input type="submit" id="" name="" />
     </form>
    </body>
    

    tel类型只能输入电话号码的文本框

    <body>
     <form action="" method="get">
      <input type="tel" name="tel">
     </form>
    </body>
    
    // url类型,如果输入框中不是url格式,会提示用户
    <body>
     <form action="" method="get">
      <input type="url" name="url">
      <input type="submit" id="" name="" />
     </form>
    </body>
    

    登录用户列表

    <body>
     <form id="login" action="" method="get">
      <label for="username">
      用户名:
      </label>
      <input id="username" type="text" name="username"/>
     </form>
     <label>密码:
     <input from="login" type="password" name="password"/>
     </label>
     <br/>
     <input form="login" type="submit"/>
    </body>
    

    form表单中,一个action属性,另一个formaction属性,method属性和formmethod属性,enctype属性和formenctype属性,formtarget属性和target属性。

    <body>
     <form id="login" action="" method="get">
      <label for="username"></label>
      <input id="username" type="text" name="username" placeholder="请输入用户名"/>
      <br/>
      <label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
      </label>
      <br/>
      <input type="submit" formaction="login"/>
      <button type="submit" formaction="regist">注册</button>
      <br/>
     </form>
    </body>
    
    <body>
     <form id="login" action="login"  method="get">
      <label for="username"></label>
      <input id="username" type="text" name="username" palceholder="请输入用户名"/>
      <br/>
      <label><input type="password" name="password" autofocus="autofocus" placeholder="请输入密码"/>
      </label>
      <br/>
      <input type="submit" formmethod="get"/>
      <input type="submit" formmethod="post"/>
     </form>
    </body>
    

    autocomplete属性用于快速输入表单,一篇浏览器提供了自动补全的功能。HTML5中autocomplete默认值为on,所以当有时候需要关掉的请输入属性值autocomplete="off"。

    autofocus属性自动获取焦点,pattern属性用于验证表单输入的内容,相反novalidate属性提交表单时不对其进行验证,required属性规定必须在提交之前必须填入输入的值。

    <body>
     <form action="" method="get">
      <textarea name="text" rows="5" cols="5" wrap="hard">
      </textarea>
      <input type="submit" id="" name=""/>
     </form>
    </body>
    

    maxlength用于规定文本区域的最大字符数,
    warp默认值为soft,在表单中提交时,textarea中文本不换行,
    当提交表单时,如果wrap="hard",则提交的文本会包含换行符

    css3选择器

    兄弟选择器,2.新增的属性选择器,3.新增的伪类选择器,4.新增的伪元素选择器。

    兄弟选择器:

    格式:
    
    元素1~元素2 
    
    { property1: value1; property2: value2 }
    
    E[attribute^=value] 
    选择带有以指定开头的属性值的元素
    
    E[attribute$=value]
    选择带有以指定结尾的属性值的元素
    
    E[attribute*=value]
    选择属性值中包含值的元素,位置不限,不限制整个单词
    

    伪类选择器

    :root 选择文档的根元素
    向元素添加样式
    :last-child 该元素是它的父元素的最后一个子元素
    :nth-child(n) 该元素是它的父元素的第n个子元素
    :nth-last-child(n) 该元素是它的父元素的倒数第n个子元素
    :noly-child 该元素是它的父元素的唯一子元素
    :first-of-type 该元素是同级同类型元素中第一个元素
    :last-of-type 该元素是同级同类型元素中最后一个元素
    :nth-last-of-type(n)该元素是同级同类型元素中倒数第n个元素
    :only-of-type 该元素hi同级同类型元素中唯一的元素
    :empty 向没有子元素的元素添加样式
    

    CSS3新增属性:

    background-clip 设置背景覆盖范围
    border-box/padding-box/content-box
    border-box背景显示区域到边框
    padding-box背景显示区域到内边距框
    content-box背景显示区域到内容框
    
    background-origin 设置背景覆盖的起点
    border-box/padding-box/content-box
    border-box:背景起点在边框的左上角
    padding-box:背景起点在内边距框的左上角
    content-box:背景起点在内容框的左上角
    
    background-size 设置背景的大小
    cover/contain
    
    text-overflow
    设置当文本溢出元素框时的处理方式
    clip/ellipsis
    clip:裁剪文本内容
    ellipsis:显示省略号
    
    word-break
    自动换行的方式
    normal/break-all/keep-all
    
    word-wrap
    单词的换行方式
    normal/break-word
    

    盒子模型

    border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-right-radius
    

    圆角边框

    box-shadow阴影

    h-shadow
    阴影的水平方向偏移的距离
    
    v-shadow
    阴影的垂直方向偏移的距离
    
    blur
    模糊的半径距离
    
    spread
    阴影的额外增加的尺寸
    
    color
    阴影的颜色
    
    inset
    切换为内部阴影
    

    outline-offset轮廓可以增加一个属性,设置轮廓的偏移量

    变形属性,transform和transform-origin

    3D变形属性,transform属性:

    rotateX: 表示元素沿着x轴旋转
    rotateY:表示元素沿着y轴旋转
    rotateZ:表示元素沿着z轴旋转

    transform-style用于设置嵌套的子元素在3D空间中显示的效果,默认值flat,preserve-3d,perspective,设置成透视效果,backface-visibility用于设置当元素背面面向屏幕时是否可见,通常用于设置不希望用户看到旋转元素的背面。

    column-count
    设置元素应该被分隔的列数

    column-width
    设置列的宽度

    columns
    一条声明设置列宽和列数

    column-gap
    设置列之间的间隔

    column-span
    设置元素应该横跨的列数

    column-rule-style
    设置列之间间隔的样式

    column-rule-color
    设置列之间间隔的颜色

    column-rule-width
    设置列之间间隔的宽度

    column-rule
    一条声明设置列之间间隔所有属性

    ❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论]

    作者Info:

    【作者】:Jeskson

    【原创公众号】:达达前端小酒馆。

    【转载说明】:转载请说明出处,谢谢合作!~

    关于目前文章内容即涉及前端,PHP知识点,如果有兴趣即可关注,很荣幸,能被您发现,真是慧眼识英!也感谢您的关注,在未来的日子里,希望能够一直默默的支持我,我也会努力写出更多优秀的作品。我们一起成长,从零基础学编程,将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。


    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达达的CSDN!

    这是一个有质量,有态度的博客

    7d927f18ebd05ea1d505a572393fbc87.jpg

    相关文章

      网友评论

          本文标题:(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适

          本文链接:https://www.haomeiwen.com/subject/lmnawctx.html