学习HTML基础 Day08
HTML 基础
html 是超文本标记语言，所以有一系列标签，将网络上的文档格式统一标签有： 创建html就有的 原有标签： - <!DOCTYPE html> ： 告诉浏览器这是html5编写的，按照html5进行解析显示 - <html lang=“en”> </html> ：<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体 - <head> </head> ：html的头部 包括文档的标题、在 Web 中的位置以及和其他文档的关系等 例如定义css和js的文档引用 - <body> </body> ： html的主体，写html显示标签的地方 - <meta charset=“UTF-8”> ： 描述这个html的信息 - < title>Title</title> ： 标题 自己常用的标签： - 注释：
- <h1>一级标题</h1> h2,h3,h4,h5 - <h6>六级标题</h6> 最多可以写到 h6 ，字体大小依次减小 - <p> 段落标签</p>. 不使用<p>标签在浏览器中会显示一行
离离原上草，一岁一枯荣。
野火烧不尽，春风吹又生。
远芳侵古道，晴翠接荒城。
又送王孙去，萋萋满别情。
<p> 离离原上草，一岁一枯荣。
</p>
<p> 野火烧不尽，春风吹又生。
</p>
<p> 远芳侵古道，晴翠接荒城。
</p>
<p> 又送王孙去，萋萋满别情。
</p>
- 换行标签 <br/>
- 粗体标签 <strong>加粗的内容</strong>
- 斜体标签 <em>斜体内容</em>
- 空格 ： 否则你空多少也只显示一个
- 水平线 <hr/>
- 图片标签 <img src="图片的地址" alt="图片的描述信息，图片地址错误或失效则显示这个" title="悬停显示的文字内容">
- 超链接标签 <a href="点击后的链接地址" target="窗口在哪里打开"></a> 超链接的内容，可以是文字，图片等</a>
超链接用途2： 设置锚点 <a name="锚的名称">锚点标记位置</a>
跳到锚点标记位置<a href="#锚点的名称">点击跳到锚点</a>
跳到别的页面锚点标记的位置<a href="test.html#锚点的名称">点击跳到锚点</a>
行内元素和块元素 块元素：无论内容多少都独占一行 有 h标签，p标签 等 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行 有a标签，em标签，列表： 有序列表，无序列表，自定义列表
<ol>
<li>111
</li>
<li>222
</li>
<li>333
</li>
</ol>
<ul>
<li>111
</li>
<li>222
</li>
<li>333
</li>
</ul>
<dl>
<dt>One
</dt>
<dd>123
</dd>
<dd>123
</dd>
<dd>123
</dd>
<dt>Two
</dt>
<dd>321
</dd>
<dd>321
</dd>
</dl>
表格
<table border
="1px">
<!--border 表示加边框便于显示 tr 表示一行 td 表示一行中的每一列 colspan 跨列 rowspan 跨行
-->
<tr>
<td colspan
="4">1-1</td
>
<!--<td>1-2</td
>-->
<!--<td>1-3</td
>-->
<!--<td>1-4</td
>-->
</tr
>
<tr>
<td rowspan
="2">2-1</td
>
<td>2-2</td
>
<td>2-3</td
>
<td>2-4</td
>
</tr
>
<tr>
<!--<td>3-1</td
>-->
<td>3-2</td
>
<td>3-3</td
>
<td>3-4</td
>
</tr
>
</table
>
视频，音频
<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></audio>
内联框架 iframe
<iframe src="https://www.baidu.com" name="xxx" frameborder="0" width="800px" height="500px"></iframe>
<a href="表格.html" target="xxx">链接
</a>
表单 : input标签有3个重要功能 hidden:隐藏 disabled:禁用 readonly:只读 ** 表单初级验证的属性**：placeholder=“提示的内容” pattern=“正则表达式” required：非空判断，一定要写内容
<form action="tets.html" method="get">
<p><label for="name">姓名：
</label><input type="text" name="username" id="name"/></p>
<p>密码：
<input type="password" name="pwd" required/></p>
<p>性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="film" name="hobby">看电影
<input type="checkbox" value="book" name="hobby">看书
<input type="checkbox" value="game" name="hobby" checked>游戏
</p>
<p><input type="button" value="按钮"></p>
<p>上传文件：
<input type="file" name="files"></p>
<p>国家：
<select name="select">
<option value="China">中国
</option>
<option value="US" selected>美国
</option>
<option value="Japan">日本
</option>
</select></p>
<p>文本内容：
<textarea name="textarea" cols="30" rows="10" placeholder="写内容"></textarea>
</p>
<p>数量：
<input type="number" name="number" max="100" min="0" step="2" /></p>
<p>搜索框：
<input type="search" name="search"/></p>
<p>滑块：
<input type="range" name="range" min="0" max="100" step="2"/></p>
<p><input type="submit"> <input type="reset"></p>
</form>
