Day08 学习HTML基础

最新推荐文章于 2024-07-12 16:26:30 发布

asd1996asdd

最新推荐文章于 2024-07-12 16:26:30 发布

阅读量151

点赞数

文章标签： java html5

本文链接：https://blog.csdn.net/asd1996asdd/article/details/108927780

版权

学习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>
	- 空格 ：&nbsp;  否则你空多少也只显示一个
	- 水平线 <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>    <!--dt 列表名称-->
    <dd>123</dd>	<!--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>

视频，音频

<!-- controls 控制条，否则不显示视频 autoplay 自动播放 -->
<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标签的链接内容显示到内联标签中 -->
<a href="表格.html" target="xxx">链接</a>

表单 : input标签有3个重要功能 hidden:隐藏 disabled:禁用 readonly:只读 **
表单初级验证的属性**：placeholder=“提示的内容” pattern=“正则表达式” required：非空判断，一定要写内容

<!-- action 表示表单提交的地址 method 表示表单提交的方式 表单内容的name属性就是传递过去的键，value就是值-->
<form action="tets.html" method="get">
    <!-- 点击label标签框住的内容就会跳到for指向的id的input标签-->
    <p><label for="name">姓名：</label><input type="text" name="username" id="name"/></p>
    <p>密码：<input type="password" name="pwd" required/></p>
    <!-- 单选框 name 必须一致 checked 默认选中-->
    <p>性别：<input type="radio" value="boy" name="sex" checked/>男
             <input type="radio" value="girl" name="sex"/>女</p>
    <!-- 多选框 name 最好一样，便于接收 -->
    <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><input type="image" src="1.jpg" title="hahaha"></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>

asd1996asdd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day08 学习HTML基础

学习java Day08HTMLhtml 是超文本标记语言，所以有一系列标签，将网络上的文档格式统一标签有：创建html就有的原有标签：- ：告诉浏览器这是html5编写的，按照html5进行解析显示- ：与标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体- ：html的头部包括文档的标题、在 Web 中的位置以及和其他文档的关系等例如定义css和js的文档引用- ： html的主体，写html显示标签的地方- ：描述这个html
复制链接

扫一扫