HTML 基础

最新推荐文章于 2024-06-17 10:40:29 发布

moc ^_^

最新推荐文章于 2024-06-17 10:40:29 发布

阅读量246

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_35976650/article/details/87886026

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

HTML: HyperText Markup Language, 超文本标记语言。

HTML典型文档结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello Html!
</body>
</html>

一、HTML 初识元素/标签

<开始标签 [ … 属性 ]> 标签内容 <结束标签>
<标签名> 标签内容 </标签名>

<!--普通标签-->
<p>世界，你好！</p>
<!--特殊标签：开始和结束标签合在一起-->
<input type= "test" value = "" />  
<!--特殊标签：换行-->
</br>

注: 属性只能在开始标签中定义。

二、HTML 属性

属: 给予元素基本标识
性: 样式或描述元素特征

通用属性/全局属性

能在所有的标签中使用的属性，如：id, class , style等。
特有属性
某些标签特有的属性，如：colspan, type, value等。

三、常用HTML标签

1、标题标签 Heading Content

浏览器会根据标题标签自动给你附加标题样式，搜索引擎或者阅读器能够根据标题来识别生成文档大纲。

<h1>一级标题内容</h1>
<h2>二级标题内容</h2>
...
<h6>六级标题内容</h6>

注：标题标签一共有六级，由h1到h6，相应的字体大小由24px到12px。

2、段落标签 Paragraph

划分文章段落。

<p>段落内容</p>
<!-- 一般浏览器默认样式中空标签也“占地方” -->
<p></p>
<p/>

3、字体标签 Font

格式化文本。

<!-- size：设置字体大小 -->
<font size="5">文字内容</font>

<!-- face: 设置字体集 -->
<font face="宋体">文字内容</font>

<!-- color: 设置颜色 -->
<font color="red">文字内容</font>
<font color="#FF00FF">文字内容</font>
<font color="rgb(100,90,120)">文字内容</font>

注：一般不建议使用font标签，而使用CSS中的font属性。

4、链接标签

文档内部锚点、跳转到外部文档、下载资源。

属性 herf： Hypertext Reference的缩写。

<p id="this"></p>
<style>
    a {
        color: #FF2200;    // 链接前颜色
        text-decoration: none;  // 是否需要下划线
        cursor: none;  // 是否需要光标属性
    }
    a:visited {  // 访问后的样式
        color: #FF0000;
    }
</style>

<!-- 在新窗口中打开超链接 -->
<a href="http://www.baidu.com/" target="_blank">百度_新窗口</a>

<!-- 在本窗口中打开超链接 -->
<a href="http://www.baidu.com/" target="_self">百度_本窗口</a>

<!-- 跳转到页面内锚点 -->
<a href="#this">跳转到页首</a>

<!-- 禁止跳转 -->
<a href="javascript:void(0)">跳转不了吧！</a>

5、图像标签 Image

插入图像。

属性 src: 图片地址。
属性 alt: 加载图片失败时，提示文本。
支持的格式：

PNG、JPEG、GIF、PDF(单页)

<style>
    .bd-logo {
        background: ur1(../log.png)；
        width: 200px;   // 必须设置高宽以撑起大小
        height: 80p;
    }
</style>

<!-- img标签使用 -->
<img alt="百度" src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super"/>

<!-- 非标签方式插入图片 -->
<p class="bd-logo"></p>

6、列表 List

插入无序、有序、定义列表。

无序列表

<!-- 无序列表可以设置前面的符号 可选：none,disc, circle,square -->
<ul type="cricle">
    <li>苹果</li>
    <li>桃子</li>
    <li>香蕉</li>
</ul>

有序列表

<ol>
    <li>丁香</li>
    <li>玫瑰</li>
    <li>蔷薇</li>
</ol>

定义列表

<dl>
    <dt>正数</dt>
    <dd>大于0的自然数</dd>
    <dt>负数</dt>
    <dd>小于0的自然数</dd>
</dl>

注：只使用无序列表就可啦，其他通过CSS样式获得。

7、DIV标签

用作布局。

<div>
    <div>
        div标签
    </div>
</div>

四、块级元素和行内元素、注释

1、块级元素

总是以新行开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；
它可以容纳内联元素和其他块元素。

2、行内元素

可和其他行内元素在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的内容的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素。

<h2>1.块级元素</h2>
<div>
	块级元素
</div>
<ul>
	<1i>不着边界</Li>
</ul>
<h2>2.行内元素</h2>
<p>
	<a href="#">点我看看</a>
	<span>用得较多的标签</span>
</p>

3、注释

<!–注释内容–>

<!--这是单行注释-->
<!--
    这是多行注释
    这是多行注释
    这是多行注释
-->

条件注释

<!--[if IE 9]>
	<div>是IE 9.</div>
<![endif]-->

注：条件注释标签只在IE10以下版本中的IE浏览器中生效。

五、HTML 常用格式化标签

1、字体相关

<b>加粗字体</b>
<br />
<strong>另一种粗体</strong>  
<br />
<big>大号字体</big>  
<br />
<em>强调字体</em>  
<br />
<i>斜体</i>  
<br />
<small>小号字体</small>  
<br />
This text contains
<sub>下标</sub>
<br />
This text contains
<sup>上标</sup>

网页效果：
在这里插入图片描述

2、预格式化标签 pre

被包围在

 标签 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

<h1>下面为一段javascript代码</h1>
<pre>
	var a = "";
	a = "Hello World";
	alert(a);
</pre>

网页效果：
在这里插入图片描述

3、引用标签

浏览器通常会对 <blockquote> 元素进行缩进。

<h1>引用演示</h1>
<blockquote>
	引用自w3c官方HTML标准文档
</blockquote>

网页效果：
在这里插入图片描述

4、删除线与下划线标签

<h1>删除线与下划线</h1>
<p>我其实有一双美丽的<del>大腿</del> <ins>请填空</ins></p>
<p>看起来很美好 然而兼容性不好</p>

网页效果：
在这里插入图片描述

六、表格 Table

用于布局，呈现需要表格布局的内容。
在这里插入图片描述

完整结构的表格
1. 表格头[可选]
2. 表格体[可选]
3. 表格行[必选]
4. 单元格[必选]

<!-- 完整格式的表格 -->
<table>
	<thead>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>成绩</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1201</td>
			<td>小明</td>
			<td>90</td>
		</tr>
		<tr>
			<td>1102</td>
			<td>小新</td>
			<td>88</td>
		</tr>
	</tbody>
</table>

网页效果：
在这里插入图片描述

表格属性

边框问题： border
单元格间距： cellspacing
单元格边距： cellpadding
单元格跨列： colspan
单元格跨行： rowspan
内容对齐： align

<table align="center" border=5 cellspacing="2">
	<tbody align="center">
		<tr >
			<td>学号</td>
			<td>姓名</td>
			<td>性别</td>
		</tr>
		<tr >
			<td>1025</td>
			<td>小明</td>
			<td rowspan="2">男</td>
		</tr>
		<tr >
			<td>20094071310</td>
			<td>小华</td>
		<tr >
			<td colspan="3">按钮</td>
		</tr>
	</tbody>
</table>

网页效果：
在这里插入图片描述
注：表格是块级元素，用表格进行全局布局已退出历史舞台，表格更注重自己专注的领域。

七、表单 Form

用于收集用户输入的内容（文本、文件）。

表单属性

action: 提交到的服务端地址
method: 指定提交时用哪种HTTP方法：POST/GET
name: 标识
autocomplete: 浏览器是否可以自动填充
enctype: 指定表单内容编码

<!-- name:表单的标识 
	 enctype:表单编码方式
	 action:提交的地址
	 method:提交方式-->
<form name="test" enctype="UTF-8" action="http://xxx.com" method="POST" >
	<!-- maxlength:限制最大长度  value:默认填写内容 -->
	姓名<input type="text" maxlength="10"  value="小明"/> </br>
	
	<!-- name:分组，同组的radio只能选择一个
		 value:提交表单时上传的值
		 checked:默认选中
	-->
	性别
	<input type="radio" name="gender" value="0" checked/>男
	<input type="radio" name="gender" value="1" />女 </br>
	
	密码
	<input type="password" value="123456"> </br>
	
	
	爱好
	<input type="checkbox" value="0" checked />电影
	<input type="checkbox" value="1" />音乐
	<input type="checkbox" value="2" />绘画 </br>
	
	数字
	<input type="number"> </br>
	
	日期
	<input type="date"> </br>
	
	颜色
	<input type="color"> </br>
	
	范围
	<input type="range" min="1" max="20"> </br>
	
	邮件
	<input type="email"> </br>
	
	网址
	<input type="url"> </br>
	
	文件
	<input type="file" multiple="multiple"> </br>
	
	选择
	<select>
		<option value="0">小学</option>
		<option value="1">初中</option>
		<option value="2">高中</option>
		<option value="3" selected>大学</option>
	</select> </br>

	多行文本
	<textarea rows="5" cols="30" >这儿有一段文字。</textarea> </br>
	
	重置按钮
	<button type="reset">重置</button>
	
	提交
	<input type="submit"> </br>
</form>

网页效果：
在这里插入图片描述

八、总结

在这里插入图片描述

moc ^_^

关注

0
点赞
踩
0

收藏

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

文章目录一、HTML 初识元素/标签二、HTML 属性三、常用HTML标签1、标题标签 Heading Content2、段落标签 Paragraph3、字体标签 Font4、链接标签5、图像标签 Image6、列表 List7、DIV标签四、块级元素和行内元素、注释1、块级元素2、行内元素3、注释五、HTML 常用格式化标签1、字体相关2、预格式化标签 pre3、引用标签4、删除线与下划线...
复制链接

扫一扫