HTML5基础(UPDATE)

最新推荐文章于 2022-04-14 20:53:27 发布

new@*

最新推荐文章于 2022-04-14 20:53:27 发布

阅读量972

点赞数

分类专栏：编程 HTML5

本文链接：https://blog.csdn.net/yfcjava/article/details/90346281

版权

编程同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

网页可以分为三大部分 HTML , CSS 和JavaScript 。如果把网页比作一个人的话， HTML 相当于骨架， JavaScript 相当于肌肉， css 相当于皮肤，‘三者结合起来才能形成一个完善的网页。HTML 定义了网页的内容和结构， css 描述了网页的布局， JavaScript 定义了网页的行为。

css ，全称叫作Cascading Style Sheets ，即层叠样式表。“层叠”是指当在HTML 中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。css 是目前唯一的网页页面排版样式标准。
在HTML中，只需要用link 标签即可引人写好的css 文件。

HTML 和css 配合使用，提供给用户的只是一种静态信息，缺乏交互性。
JavaScript 的出现使得用户与信息之间不只是一种浏览与显示的关系，而是实现了一种实时、动态、交互的页面功能。
JavaScript 通常也是以单独的文件形式加载的，后缀为js ，在HTML 中通过script 标签即可引人。

1.html中的元素

(1)认识html元素
如："   <code>apple</code> 、<html>- - -</html>  "
标签(tag)
元素分为三大部分：开始标签(<code>)、结束标签(</code>)、元素的内容(apple)
(2)空元素
如:"	<code></code> 、<code/>	"
(3)虚元素:只用一个标签表示
<hr>   hr元素用来表示段落终止，会显示一条横线

（4）认识元素属性
	属性只能用于开始标签、单个标签，不能用于结束标签。
	一个元素可设置多个属性，属性顺序未做要求
属性具有名称(href)和值("apples.html")两部分
如："	<a href="apples.html" >apples</a>		"
属性href是元素a的专有属性,它配置的是超链接的目的URL
(5)布尔属性
	这种属性不需要设定一个值，只需将属性名增加到元素中即可
如：”	<input disabled> "	
input元素用于让用户输入数据，disabled属性可阻止用户输入数据
(6)自定义属性：
	它与javascript和css结合起来很有用
如："	<input data-creator="adam" >		"
前缀data-是为了避免给未来版本的HTML增加的属性名冲突。

2.创建html文档

<!DOCTYPE html>		让浏览器明白处理的是html文档
    <html>
        <head>				head元素中包含的是元数据(提供文档的一些信息)，以下只有title元素一项.
        	<!-- 例子 -->		注释
            <title>Example</title>
        </head>
        <body>		文挡内容放在body元素下
        	yes:<input>
        </body>
    </html>

3.html5元素分类

html5将元素分为三大类:元数据元素、流元素、短语元素。
元数据元素用来构建html文档的基本结构，以及如何处理文档向浏览器提供信息和指示。
其它两个用来确定一个元素合法的父元素和子元素的范围.

4.Html5全局属性

每一个局部属性可以用来控制元素独有行为的某个方面.
全局属性用来配置所有元素共有的行为.

accesskey属性

<!DOCTYPE HTML>
    <html>
        <head>
            <title>This is a demo</title>
        </head>
        <body>
            <form>
                <!--设置accesskey属性可以使用快捷键访问经常用到的属性-->
                <!--windows下ALT+对应的键-->
                Name:"" "<input type="text" name="name" accesskey="n"/>
                <p/>
                Password:<input type="password" name="password" accesskey="p"/>
                <p/>
                <input type="submit" value="Log In" accesskey="s"/>
                <p/>
                <label></label>a
            </form>
        </body>
    </html>

class属性：用来将元素归类，为了能够找到文档中的某一类元素或未其应用CSS样式

<!DOCTYPE HTML>
    <html>
        <head>
            <title> Example</title>
        </head>
        <body>
            <!--一个元素可被归入多个类别，因此class提供用多个空格分隔的类名-->
            <a class="class1 class2" href="http://apress.com">Apress web site</a>
            <p/>
            <a class="class2 otherclas" href="http://w3c.org">W3C web site</a>
        </body>
    </html>

定义依靠类起做用的样式

<!DOCTYPE html>
    <html>
        <head>
            <title>Example</title>
            <!--用style元素定义了两条样式。-->
            <!--这里以点（．）开头代表选择class 其后紧跟class 的名称-->
            <style type="text/css">
                .class1{
                    font-size: x-large;
                }
                .class2{
                    background-color: grey;
                    color: white;
                    padding: 5px;
                    margin: 9px;
                }
            </style>
        </head>
        <body>
            <a class="class1 class2" href="http://apress.com">Apress web site</a>
            <p/>
            <a class="class2 otherclas" href="http://w3c.org">W3C web site</a>
        </body>
    </html>

在script中使用class元素

<!DOCTYPE HTML>
    <html>
        <head>
            <title>demo</title>           
        </head>
        <body>
            <a class="class1 class2" href="http://apress.com">Apress web site</a>
            <p/>
            <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
            <!--找出所有属于otherclass类的元素并对其设置一些样式-->
            <script type="text/javascript">
                var elems=document.getElementsByClassName("otherclass");
                for (i=0;i<elems.length;i++)
                {
                    var x=elems[i];
                    x.style.border = "thin solid black";
                    x.style.backgroundColor = "white";
                    x.style.color = "green";
                }
            </script>         
        </body>
    </html>

contenteditable属性让用户能够修改页面上的内容

<!DOCTYPE HTML>
    <html>
        <head>
            <title>demo</title>           
        </head>
        <body>
     	    <!--该属性为true用户可编辑。false不可编辑-->
            <p contenteditable="true">It is raining right now</p>
        </body>
    </html>

dir属性用来规定元素中文字的方向

<!DOCTYPE HTML>
    <html>
        <head>
            <title> Example</title>
        </head>
        <body>
            <!--用于从右到左的文字-->
            <p dir="rtl">This is right-to-left</p>
            <!--用于从左到右的文字-->
            <p dir="ltr">This is left-to right</p>
        </body>
    </html>

hidden属性是个布尔属性，表示当前元素无需关注

<!DOCTYPE html>
    <html>
        <head>
            <title>Example</title>
            <script>
                var toggleHidden = function(){
                    var elem=document.getElementById("toggle");
                    if(elem.hasAttribute("hidden")){
                        elem.removeAttribute("hidden");
                    }else{
                        elem.setAttribute("hidden","hidden");
                    }
                }
            </script>
        </head>
        <body>
            <button onclick="toggleHidden()">Toggle</button>
            <table>
                <!--tr元素代表表格中的一行-->
                <tr><th>Name</th><th>City</th></tr>
                <tr><th>Adam Freeman</th><th>London</th></tr>
                <!--hidden是个布尔属性，浏览器对它的操作是隐藏相关元素-->
                <tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
                <tr><td>Anne Jones</td><td>Paris</td></tr>
            </table>
        </body>
    </html>

id属性

<!DOCTYPE html>

<html>
    <head>
        <title>Example</title>
    </head>
    <style>
        #w3clink{
            background:grey;
            color:white;
            padding: 5px;
            border: thin solid black;
        }
    </style>
    <body>
        <a href="http://apress.com">Apress web site</a>
        <p/>
        <!--id属性用来给元素分配一个唯一的标识符，
        这种标识符通常将样式应用到元素上或在JAVASCRIPT程序中用来选择元素-->
        <a id="w3clink" href="http://w3c.org">W3C web ssite</a>
    </body>
</html>

lang属性

<!DOCTYPE HTML>
    <html>
        <head>
            <title>demo</title>           
        </head>
        <body>
            <!--lang属性用于说明元素内容使用的语言-->
            <p lang="en">Hello - how are you?</p>
            <p lang="fr">Bonjour - comment etes-vous?</p>
            <p lang="es">Hola - commo estas?</p>
        </body>
    </html>

spellcheck属性

<!DOCTYPE HTML>
    <html>
        <head>
            <title>demo</title>           
        </head>
        <body>
            <!--spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查
            该属性只用在用户可以编辑的元素上时才有意义-->
            <textarea spellcheck="true">This is some mispelled text</textarea>
        </body>
    </html>

style属性

<!DOCTYPE HTML>
    <html>
        <head>
            <title> Example</title>
        </head>
        <body>
            <!--style属性用来直接在元素身上定义CSS样式-->
           <a href="http://appress.com" style="background: grey; color: white; padding: 10px">
                visit the apress site
           </a>
        </body>
    </html>

tabindex属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <form>
            <!--tabindex属性通过按Tab键在各元素间切换，从第一个选中的元素，后会依次类推-->
            <label>Name: <input type="text" name="name" tabindex="1"/></label>
            <p/>
            <label>City: <input type="text" name="city" tabindex="-1"/></label>
            <p/>
            <label>Country: <input type="text" name="country" tabindex="2"/></label>
            <p/>
            <input type="submit" tabindex="3"/> 
        </form>
    </body>
</html>

title属性，浏览器通常用它显示工具提示

<!DOCTYPE html>

<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <a title="Apress Publishing" href="http://apress.com">visit the Apress site</a>
    </body>
</html>

5.css(层叠样式表)
css用来规定html文档的呈现形式（外观和格式编排）
css样式由一条或多条以分号隔开的样式声明组成，每条声明包含一个css属性和该属性的值两者以冒号分隔。

使用元素内嵌样式
<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
    </head>
    <body>
    	<!--有一个样式声明“color: green”，属性color值为green-->
        <a href="http://www.baidu.com" style="color: green">back</a>
    </body>
</html>

使用style元素定义样式（文档内嵌样式）
<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        
        <style type="text/css">
            a{
                background: green;
                font-size: xx-large;
            }
            
            span{
                
                padding: 2px;
                border: thin black solid;
            }
        </style>
        <!--padding目标元素与边框之间的间距。border属性设置的是围绕目标元素的边框-->
    </head>
    <body>
        <a href="http://www.baidu.com">back</a>
        <p/>
        <p>I like <span>apples.</span></p>
    </body>
</html>

使用外部样式表：一套样式用于多个html文档。样式文件( *.css )
--------------------
				(s.css文件)
a{
    background: brown;
    font-size: xx-large;
}

span{
    border: thin brown solid;
    padding: 10px;
}
--------------------
<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        <link rel="stylesheet" type="text/css" href="s.css"></link>
    </head>
    <body>
        <a href="http://www.baidu.com">back</a>
        <p/>
        <p>I like <span>apples.</span></p>
    </body>
</html>

向一个样式文件中导入另一个样式文件
:@import 语句必须位于样式表顶端，样式表自己的样式定义不能出现在它之前。
:@import 应用的并不广泛
:可出现在@import之前的只有@charset(声明样式表使用的编码)
------------style.css--------
@charset "UTF-8";
@import "s.css";

浏览器样式: 元素尚未设置样式时浏览器应用在它身上的默认样式。
用户样式： 大多数浏览器都允许用户定义自己的样式表。Chrome会在用户的个人配置信息目录中生成一个名为Default/User StyleSheets\Custom.css的文件。

明白了浏览器所要查看的所有样式来源，现在可以看看浏览器要显示元素时求索一个Css属性值的次序：

元素内嵌样式
文档内嵌样式
外部样式
用户样式
浏览器样式
---
浏览器会根据上面5个从上到下的顺序依次查找是否有应用该元素的样式，
	直到找到为止。

重要样式调整层叠次序

<!--  !important  不管这种样式属性定义在什么地方浏览器会给予优先考虑-->
<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        <style type="text/css">
            a{
                color: black !important;
            }
        </style>
    </head>
    <body>
        <a style="color: red" href="http://www.baidu.com">back</a>
    </body>
</html>

同级样式冲突

<!--
根据具体程度和定义次序解决同级样式冲突
			1. 样式的选择器中id值的数目
			2. 选择器中其他属性和伪类的数目
			3. 选择器中元素名和伪元素的数目
具体程度相当的样式根据后来者居上的规则
-->
<!--a.class1{}后来者居上-->
<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        <style type="text/css">
            a{
                color: black;
            }
            
            a.class2{
                color: green;
                background: black;
            }
            
            a.class1{
                color: yellow;
                background: red;
            }
        </style>
    </head>
    <body>
        <a class="class1 class2" href="http://www.baidu.com">back</a>
    </body>
</html>

继承

<!---span元素的border属性值继承自父元素-->
<!DOCTYPE HTML>
<html>
    <head>
        <title>demo</title>
        <style type="text/css">
            p{
                color: white;
                background: black;
                border: medium solid red;
            }
            span{
                border: inherit;
            }
            
        </style>
    </head>
    <body>
        <p>I like <span>apples</span>.</p>
    </body>
</html>

css颜色函数

1.	color: rgb(112,128,144)
2.	color: rgba(112,128,144,0.4)  0.4代表透明度(0~1).
3.	hsl(HUE色相, SATURATION饱和度 ,LIGHTNESS明度)  hsl(120, 100%, 22%)
4.	hsla(4个参数)

new@*

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础(UPDATE)

小白一个，将自己的学习过程记录在博文中。望广大朋有指出不足之处。1.html中的元素(1)认识html元素如：" <code>apple</code> 、<html>- - -</html> "标签(tag)元素分为三大部分：开始标签(<code>)、结束标签(</code>)、元素的内容(apple)(2)...
复制链接

扫一扫