html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html相关的知识，希望对你有一定的参考价值。
注意嵌套规则：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
块级元素不能放在<p>里面。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）
<!DOCTYPE html> 声明为w3c标准规范
<head></head> html 头部
<body></body> html 身体
<b>加粗标签</b>
<strong>加粗标签.</strong>
<strike>为文字加上一条中线.</strike>
<i> 标签显示斜体文本效果。</i>
<em>文字变成斜体.</em>
<sup>上脚标</sup>
<sub>下脚表</sub>
<br> 换行 自闭合
<hr> 水平线 自闭合
<h1></h1> n的取值范围是1~6; 从大到小. 用来表示标题.
<p>段落标签. 包裹的内容被换行.并且上下内容之间有一行空白</p>
<a>超链接标签</a>
<a href=‘#abc‘>点我</a> <!--连接到id为abc的标签-->
<a href=‘http://baidu.com‘>点我</a> <!--连接到网址-->
<img>图形标签自闭合
<img src=‘11.jpg‘ alt=‘ok‘ title=‘ok‘ width=‘100‘ height=‘100‘>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
------------------------------
<ul> <!--无序列表-->
<li>第一条</li> 列表内容
</ul>
------------------------------
<ol> <!--有序列表-->
<li>第一条</li> 列表内容
</ol>
------------------------------
<dl> <!--自定义列表-->
<dt>列表标题</dt>
<dt>列表第一项</dt>
</dl>
------------------------------
<table> <!--表格-->
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
</tr>
<tr>
<td>内容第一列</td>
<td>内容第二列</td>
</tr>
</table>
------------------------------
<form action="http://127.0.0.1:8080/" method="post" enctype="multipart/form-data"> # 提交输入内容
<!--action要提交的地址-->
<!--method提交的方式-->
<!--提交文件必须加entype=‘multipart/form-data‘-->
<input type=‘text‘ name=‘usname‘> <!--文本输入框-->
<input type=‘password‘ name=‘pwd‘> <!--密码输入框-->
<input type=‘radio‘ name=‘radio‘ value=‘1‘> <!--单选框name相同value只能是其中之一-->
<input type=‘radio‘ name=‘radio‘ value=‘2‘> <!--单选框-->
<input type=‘checkbox‘ name=‘checkbox‘ value=‘1‘> <!--多选框name相同value可以为多个-->
<input type=‘checkbox‘ name=‘checkbox‘ value=‘2‘> <!--多选框-->
<select name="language" size=‘1‘> <!--表单同一个name对应多个value默认单选; size为显示几个-->
<optgroup label="河北省">
<option value="1">邢台</option>
<option value="2">邯郸</option>
</optgroup>
<optgroup label="河南省"> <!--分类名-->
<option value="2">郑州</option>
<option value="4">安阳</option>
</optgroup>
<select>
<input type=‘button‘> <!--无功能按钮-->
<input type=‘file‘ name=‘file‘> <!--提交文件-->
<input type=‘submit‘ value=‘按钮文字‘> <!--提交按钮-->
</form>
------------------------------
<div>无功能块级标签 配合css使用
<span>无功能内联标签 配合css使用
块级标签和内联标签
块级标签：<p> <h1> <table> <ol> <ul> <form> <div>
内联标签：<a> <input> <img> <sub> <sup> <textarea> <span>
block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
特殊字符： < >；"；©®
以上是关于html的主要内容，如果未能解决你的问题，请参考以下文章