一篇文章了解html
基础知识
html:Hyper Text Markup Language:超文本标记语言，内容既可以是文字还可以是图片、链接、音频、视频等。
注释：<!-- 注释内容 -->
块级元素：默认占一整行,可以设置宽高属性。
行内元素：可以在一行显示，宽高属性不生效。
行内块元素：可以设置宽高，也可以在一行内显示.
嵌套规则：
a.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）
b.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意
p标签中是不允许嵌套其他任意的块元素
h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）
<!-- 常用块元素<pre>\<center>\<ul><ol><dl>\<form>\<table>\<h>\<p>\<hr>\<div> -->
<center>显示居中文字</center>
<pre>
预格式文本
</pre>
<hr>
<!-- 常用行内元素:<strong><b>/<i><em>/<sup><sub>/<del><u>/<input><select><textarea>/<a>/<br>/<span> -->
<strong>我的字体加粗</strong>
<br>
<b>我的字体加粗</b>
<br>
<i>我的字体是斜体</i>
<br>
<em>我的字体是斜体</em>
<br>
<span>H<sub>2</sub>O</span>
<br>
<span>5<sup>8</sup></sppan>
<br>
<del>我是一个删除线</del>
<br>
<u>我是一个下划线</u>
<br>
标签
<!doctype html>
功能：声明文档类型。
特点：
1.必须写在第一行
2.标签前面不能写任何内容，空格也不行。
<html>
</html>
功能：根元素
<head>
</head>
功能：声明头部信息
<meta charset = "utf-8">
功能：meta:声明元数据
charset属性：编码方式,给浏览器看的。
<title>
</title>
功能：标题标签
如果不写，会显示文档路径
<body>
</body>
功能：声明主体信息
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
功能：标题标签，从h1-h6字体依次减小，可以使用css对字体样式进行修改。
<p>窗前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡。</p>
功能：段落标签
<div>
</div>
功能:常用于页面的布局。
<img src="" alt="" title = "" width = "" height = "">
功能：图片标签
属性：
src:用于输入图片的路径
相对路径(推荐使用)：相对于自己开始寻找文件(./或不写(不写在加入框架中可能会出错):当前目录,…/：上一级目录.)
绝对路径：从盘符开始寻找文件，直到找到文件为止。(文件如果以盘符的形式放在html中,使用网址访问，可能不会显示，因为浏览器安全的问题。)
alt:图片加载失败时，显示的文字。
title:鼠标在文字上方悬停时，显示的文字。（所有的标签都有这个属性）
width:调整图片的宽度。
height:调整图片的高度。
如果只设置高度或者宽度图片可能以原来的比例等比例缩小。
<ul type=''>
<li>第一列</li>
<li>第二列</li>
</ul>
功能：无序列表标签
属性:type
disc：默认,黑心圆。
circle:空心圆
square:实心方块
<ol type="" start="">
<li>第一列</li>
<li>第二列</li>
</ol>
功能：有序列表
属性
1.type
可供选择内容：1 / A / a / I / i
2.start:有序列表开始的数字。
<dl>
<dt>第一类</dt>
<dd>第一种类型</dd>
<dd>第二种类型</dd>
<dt>第二类</dt>
</dl>
功能：自定义列表
<!-- 列表嵌套 -->
<!-- 自定义列表中定义无序列表，再定义有序列表 -->
<dl> <!-- 定义无序列表 -->
<dt>男人喜欢什么</dt>
<dd>
物质追求
<ul type='square'>
<li>
水果
<ol type="1" start="1">
<li>香蕉</li>
<li>栗</li>
<li>苹果</li>
</ol>
</li>
<li>
衣服
<ol type="A" start="2">
<li>阿玛尼</li>
<li>耐克</li>
<li>阿迪达斯</li>
</ol>
</li>
<li>
狗
<ol type="I" start="3">
<li>二哈</li>
<li>泰迪</li>
<li>牧羊犬</li>
</ol>
</li>
</ul>
</dd>
<dd>
精神追求
<ul type="circle">
<li>
电影
<ol type="1" start="2">
<li>复仇者联盟4</li>
<li>钢铁侠</li>
<li>美国队长</li>
</ol>
</li>
<li>
书本
<ol type="A" start="2">
<li>一千零一夜</li>
<li>百年孤独</li>
</ol>
</li>
</ul>
</dd>
<dt>女人喜欢什么</dt>
<dd>
物质追求
<ul type="disc">
<li>
口红
<ol type='1' start="1">
<li>纪梵希</li>
<li>萝卜丁</li>
</ol>
</li>
<li>
衣服
<ol type='a' start='2'>
<li>纪梵希</li>
<li>阿玛尼</li>
</ol>
</li>
</ul>
</dd>
<dd>
精神追求
<ul type="disc">
<li>
书本
<ol type='i' start='3'>
<li>一千零一夜</li>
<li>我的世界</li>
</ol>
</li>
<li>
电影
<ol type="A" start='4'>
<li>钢铁侠</li>
<li>一个人</li>
</ol>
</li>
</ul>
</dd>
</dl>
<!-- a标签 -->
<a href="https://www.baidu.com">跳转到百度</a>
<br>
<a href="./b.html">跳转到b目录</a>
<br>
<a href="./b.html" target="_blank">新页面打开b页面</a>
<br>
<a href="./b.html" target="_self">默认方式，在本页面打开会覆盖</a>
<!-- 锚点 -->
<a href="#id">锚点跳转</a>
<!-- 跳转到b页面的指定内容上 -->
<a href="./b.html?#id">b页面的锚点</a>
功能：链接标签
属性：
href:后面可以是相对地址，可以是绝对地址，可以是url。
target:_blank，以新页面打开该文件。_self,在该页面打开文件。
#id：可以利用id值跳转到指定的锚点，跳转的页面可以是本页面，也可以是其他页面（?后面加入参数，将参数后的内容提交到url中）。
<!-- 使用表格创造个人简历 -->
<h2 style="text-align:center;">个人简历</h2>
<table border="1" align="center" width="20%" cellpanding="10" cellspacing="0">
<!--
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
-->
<tr>
<th>姓名</th>
<th>性别</th>
<th rowspan="2">照片</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td colspan="3">家庭地址</td>
</tr>
</table>
功能：设置表格
属性：
table属性
1.border:给表格增加边框，默认单位为像素。
2.cellpanding:单元边沿与其内容之间的空白.(单元格与字体之间的距离)
3.cellspacing:单元格之间的空白。
4.align:表格对其方式
5.width:表格宽度
th/td属性
1.rowspan:纵向合并，删除下一个tr中的td
2.colspan：横向合并，删除本tr中的td/th
3.width:宽度.
4.height:高度.
<form action="#" method="get" enctype="">
</form>
功能：表单
form的属性
1.action:表单提交的位置
2.method:表单提交的方式
get(url提交,提交的大小有限制，最多2k，不安全。)
post(比get提交的内容更多，更安全。)
3.enctype:编码
<label for="user">用户名:</label>
<input type="text" id="user" name="username" placeholder="请输入用户名" value="1" readonly required="required">
<br/>
<label fro="pwd">密 码;</label>
<input type="password" id="pwd" name="password" placeholder="请输入密码" required>
<br/>
文本框和密码框
label属性
for:用于和input中的id相呼应，当点击字体时，可以跳转到输入。
text和password的属性
name:将name中的内容和输入的内容当成一组键值对。
placeholder:输入透明的提示内容
value:输入默认值
required:必须填写
readonly:不允许更改
size：设置文本框的大小，默认像素。
<label>单选框</label>
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
<br>
<label>复选框</label>
<input type="checkbox" name="hobby1">吃
<input type="checkbox" name="hobby2">喝
<input type="checkbox" name="hobby3">玩
<input type="checkbox" name="hobby4">乐
同一个单选框name相同
name和value的值会组成键值对提交
checked默认选择
<!-- 图片上传 -->
<label>图片上传</label>
<input type="file" name="pic">
<br>
<label>隐藏</label>
<input type="hidden" name="id" value="5">
<br>
<label>邮箱</label>
<input type="email" name="youxiang" required>
<br>
<label>数字</label>
<input type="number" name="number" step="5" value="5" min="5" max="20">
<br>
<label>链接</label>
<input type="url" name="url" required>
<br>
<label>日期</label>
<input type="date" name="date">
<br>
<input type="datetime-local" name="datetime-local">
<br>
<label>滚动条</label>
<input tye="range" name="range" min="1" max="100">
<br>
<label>拾色器</label>
<input type="color" name="color">
<br>
<label>搜索</label>
<input type="search" name="search">
<!-- 提交按钮 -->
<input type="submit" value="登陆">
<br>
<input type="button" value="提交">
<br>
<input type="image" src="./b.html">
<br>
<input type="reset">
submit默认value值是提交，button没有默认值，常用于和js一起使用，image是图片提交标签。
<select name="ball" multiple size="4">
<option value="football" >足球</option>
<option value="basketball" selected>篮球</option>
<option value="badminton">羽毛球</option>
</select>
select 代表下拉框，但具体的内容要通过option标签来实现,selected为默认选项。multiple：可以显示多个选项，size：选项的个数
留言：<textarea></textarea>
多行文本域的大小默认是可以自由扩展的，宽高的自由扩展会影响页面的排版
1、指定最大宽高及最小宽高 style=‘max-width: 200px;min-width: 200px;max-height: 200px;min-height: 200px;’
2、禁止重置大小style=“resize: none;”
<iframe src="./b.html" width="100%" height="200px" frameborder="0" scrolling="auto"></iframe>
引入其他页面
frameborder：控制是否显示边框线 1显示 0不显示
scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
