html入门基础知识与部分html5新标签和属性剖析

最新推荐文章于 2024-07-25 18:08:50 发布

Echo*

最新推荐文章于 2024-07-25 18:08:50 发布

阅读量303

点赞数

分类专栏： HTML5+CSS+JS 文章标签： html html5

本文链接：https://blog.csdn.net/qq_40963076/article/details/100926427

版权

HTML5+CSS+JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

body标签：

注意！bgcolor属性和background属性是不一样的
backgroud是设置背景图片的
bgcolor是设置背景颜色的

<body bgcolor="" background="">
</body>

h1标签：

align属性可以用来设置对齐方式，值可以是right，left，center
也不仅仅h1标签有这个属性，一些别的标签也有这个属性

<h1 align="">标题</h1>

pre标签：

不使用pre标签之前，浏览器会忽略掉html代码中的空格和换行，使用pre可以原封不动的把内容显示，保留换行，空格。

font标签：

设置字体、可以设置颜色和大小。

<font color="green" size="12px"></font>

a标签：

<a href="" target="_blank" name=""></a>

href属性可以设置网页的地址，可以是本地的网页，也可以使用http表示标识网络上的网页，使用#则表示本页地址
traget的值表示如何打开一个网页，_blank表示在新的一个空白页打开网页
name属性需要和href属性结合使用
name属性的值可以是任意字符串
可以实现页面内的跳转例如：

<a name="tips">A</a>
<a href="#tips">B</a>

name可以当作锚点
点击B链接就会跳转到A链接所在的位置，href中使用#表示本页面的地址
#name 可以跳到锚点处
描点和跳转只能使用a标签

html中的字体标签：

以下示例的标签中的中文是这个标签的用途，标签的表现在不同的浏览器上可能有不同的表现
编写xml时请根据具体含义编写

<b>加粗</b>		
	
<strong>加重语气</strong>  <!--都表现为加粗(谷歌浏览器)-->

<em>着重</em>
<i>斜体</i>  <!--都表现为斜体(谷歌浏览器)-->

<small>小</small>  <!--字体变小，但不是很明显-->

<sub>下标</sub>  <!--字体变小-->

<sup>上标</sup>  <!--字体变小-->

<ins>插入字</ins>  <!--字体有下滑线(谷歌浏览器)-->

<del>删除字</del>  <!--字体上有删除线(谷歌浏览器)-->

style的三种使用形式：

推荐使用
rel属性表示引入一个外部标签
type属性表示引入的类型
href需要设置外部标签的地址

外部样式：
 <link rel="stylesheet" href="(样式文件)" type="text/css">

内部样式：
<style type="text/css">
      ...
</style>
内联样式：
<... style="...">
<!--直接作为标签的属性进行设置-->

img标签：

<img src="(图片路径)" width="(宽度)" height="(高度)" alt="(替换文本)" align="可以设置与其他标签或文字的对齐">
<!--但图片无法显示时，则显示替换文本-->

table标签：
border表示的是边框
tr每一行都要有这个标签，表示一行
th有点不同的单元格，表示表头，字体加粗居中(谷歌浏览器)
td表示单元格，你几乎可以在这里放上数据
cellpadding属性用来设置单元格的内边距
cellspacing表示单元格之间的间隔
caption表格的标题，一般加粗出现在表格顶上
bgcolor和background的功能同上，参照body

td标签的属性：valign和align可以设置内容的水平和垂直水平的对齐

<table border="" cellpadding="" cellspacing="" bgcolor=""
background="">
    <caption>标题</caption>
    <tr>
        <th>表头</th>
    </tr>
    <tr>
        <td valign="center" align="center"></td>
    </tr>
</table>

列表：

有序：
ul标签表示无序列表
type属性可以指定样式，可以填disc，circle，square
li标签表示列表项

无序：
ol标签表示有序列表
type可以填1，i，A，a，I，多种标记方式
start设置标记开始从哪个字母(数字)开始

自定义（自定义列表没有直接提供标记）：
dl表示自定义的列表
dt表示列表项
dd表示列表项的描述

<ul type="" > 
    <li>列表项</li>
    ...
</ul>

<ol type="" start=""> 

    <li>列表项</li>
    ...
</ol>

<dl>
    <dt>列表项</dt>
    <dd>列表项描述</dd>
    ...
</dl>

span和div的异同

两者都是html标签的容器
多数情况下可以使用这两个标签来指定样式
在div中，没有指定是什么样的容器，所以你什么都可以放进去
div会形成一个块元素
而span会形成一个内联元素
id属性可以用来标识div或者是span标签

<div id="divid" >
<!--在div中，没有指定是什么样的容器，所以你什么都可以放进去-->
</div>
<span id="spanid">
</span>

css定位：

通过css找到id可以设置制定的样式
css通过 # + id可以找到对应标签
例如：

#divid{
	 ...
}
#spanid{
	 ...
}

表单：

创建一个表单需要使用form标签
action表示的是提交的地址
method表示提交的方式，可以设置的值为post和get
input标签是用来输入信息的地方
type可以用来设置如何输入信息
text：表示输入的是文本
password：表示输入的是密码，输入时内容会替换成圆点
checkbox：表示复选框
radio：表示单选框，需要和name配套使用，name属性是用来分组的
select：表示下拉框，需要和option配套使用，option表示的是选项内容
button：表示一个按钮，value为按钮中的文字显示
textarea：表示文本输入，可能会有大量文本信息时使用，cols和rows可以设置行列长度
submit：表示提交按钮，会发送表单里的数据，value同上功能

<form action="" method="">
    <input type="text">
    <input type="password">
    <input type="checkbox">
    <input type="radio" name="1">
    <input type="radio" name="1">
    <select>
        <option>1</option>
        <option>2</option>
    	<option>3</option>
    	<option>4</option>
    </select>
    <input type="button" value="button">
    <textarea cols="" rows=""></textarea>
    <input type="submit" value="submit">
</form>

iframe标签：

似乎已经不是很推荐使用的标签
但是还是有人用
可以在一个页面里开个小窗口显示另一个页面
src为另一个页面的地址

<iframe src=""></iframe>

html中的实体：

如果需要在html中显示例如<>这样的符号，需要使用实体代替
类似的符号特别的多，需要使用的时候浏览器查询以下就可以了

> 对应 &gt;
< 对应 &lt;

html5中的部分新元素：
spellcheck：可以检查输入是否有拼写错误
tabindex：可以设置按下Tab键跳转的索引顺序，对于开发人员比较有用
contenteditable：如果为true，则该标签内容可以选中修改，但是原来点击的功能会失效
hidden：如果带有这个属性，浏览器不会渲染该标签，标签内容就不会显示

<input type="text" spellcheck="true">
<a href="" tabindex="2">1</a>
<a href="" tabindex="1">2</a>
<a href="" tabindex="4">3</a>
<a href="" tabindex="3">4</a>
<ul contenteditable="true" hidden>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
</ul>

html中的语义化标签：

html中有许多的语义化标签，对开发的人来说使用起来其实没有什么特殊的效果，开发起来也没有什么附带的功能只是能使开发时写出来的代码更加易读但是这样写可以提高机器的解析效率，方便机器识别，比如方便搜索引擎知道你写的东西是什么，方便它通过用户的关键字搜索到你的网页，它能提供给用户提供好的服务，你也能有网页的访问量。
aside：表示非主要内容或者是附加信息，这里可以呈现一些不是主要内容但是可以提供帮助的内容比如添加一个用户浏览时可能感兴趣的链接地址
nav：表示导航内容，用户可以通过这个标签里的内容跳转到别的页面
article：表示一个独立的部分，就比如一偏文章，一个文档之类的，使用这个标签时最好添加上header标签和footer标签，它们可以使你的代码更有层次感
section：可以把内容进行分块，使用时记得使用title标签，最好不要用做其他事，如果需要指定样式请使用div。

header:标签具有导航和引导作用的结构元素。
footer：标签可以作为一个区域的脚注，或者是整个页面的脚注，通常可以包括作者信息，相关链接和法律版权

time:这个标签表示时间，datetime属性是用来解码用的，方便机器提取内容，机器会按照特定的格式来读取内容，中间的内容是显示给用户的
T:表示后面带有时间
Z：表示机器编码是UTC标准时间

address:表示用户地址，也可以是其他类型的联系人信息
使用方法：

<aside>
    <a href=""></a>
</aside>

<nav>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</nav>

<article>
    <header></header>
    <footer></footer>
</article>

<sectioin>
    <title></title>
</sectioin>

<time datetime="2015-10-10T20:00z">2015-10-10</time>

<address>
<a href="">...</a>
</address>

html5中表单新元素：

表单的内容可以不再一定要包含在form标签里，只要给form添加一个id，标签就可以通过form = id 找到对应表单
pattern：可以给输入的信息添加上正则表达式进行过滤
autofocus：设置进入浏览器时默认选中的区域
required：如果设置该属性，表示该项信息时必须要有的，没有填写内容无法提交表单并且会有固定提示
label：可以给用户带来更好的交互体验，for指定对应控件的id，点击lable中的文字会激活对应的控件
placeholder：表示控件中的提示输入信息
autocomplete：如果设置此项为on，则允许浏览器判断将要输入的信息，信息来源一般来自历史输入
list：表示文本下拉框，不仅可以输入文字，也可以使用下拉框，需要和datalist标签配合使用，datalist中的option表示选项内容，通过id来关联list和datalist

在html5之前，一个表单的提交对象和提交方式同时只能设置一个
html5中可以一个表单可以使用不同的提交方式发送给不同的对象，
formaction：设置点击按钮时提交的页面地址
formtarget：表示点击提交按钮之后页面的如何显示，_self表示在原页面
打开，_blank表示在空白页打开，和a标签的target属性类似
formmethod：设置提交的方式
formenctype：设置如何对提交的信息进行编码，具体请浏览器搜索
input imge: 一个图片提交按钮控件，不是一个简单的图片显示，而是一个可以放置图片的一个提交按钮

<form id="myform">
    <input id="lab" type="text" pattern="" autofocus required>
    <label for="text">5555</label>
    <input id="text" type="text" placeholder="type something here" autocomplete="on" list="datalist">
    <datalist id="datelist">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </datalist>
    <input type="submit" formaction="xxx1.jsp" formtarget="_self" formmethod="post">
    <input type="submit" formaction="xxx2.jsp" formtarget="_blank" formmethod="get" formenctype="text/plain">
    <input type="image" src="">
</form>
<textarea form="myform"></textarea>