web前端的恐怖之旅（1）：html常用标签的使用

最新推荐文章于 2024-04-12 10:57:29 发布

狄鸠

最新推荐文章于 2024-04-12 10:57:29 发布

阅读量299

点赞数

分类专栏： 6.HTML+CSS

本文链接：https://blog.csdn.net/weixin_44038881/article/details/87910167

版权

6.HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一，HTML

什么是html？超文本标记语言（简称html）
怎么学html？ html是一门标记语言，标记语言由一套标记标签组成，学习html就是学习标签
开发工具？编辑器：pycharm 浏览器：chrome，firefox
一个能看到的网页就是一个前端页面，右键点击检查或者F12能查看该前端页面源代码
HTML的基本结构

HTML的基本模块

<!DOCTYPE html>					<!--文档类型-->
<html lang="en">				<!--根标签-->
<head>							<!--网页头部-->
    <meta charset="UTF-8">		<!--国际编码 UTF-8-->
    <title>Title</title>		<!--网页标题-->
</head>
<body>							<!--网页的主题 可视化区域-->

</body>
</html>

<!DOCTYPE html>标签的作用：在html文件最前面声明，定义文档类型，告知浏览器用HTML何种规范去解析文档

二，常用的标签

由尖括号包裹单词构成，eg：<html>，不可以数字开头
标签不区分大小写，推荐小写

标签可以嵌套，但不能交叉嵌套

错误事列：<a><b></a></b>
正确事例：<a><b></b></a>

标签使用样式：
1. 开始标签<p>标签体</p>结束标签
2. 自闭合标签，eg：<br>:换行, <hr>:水平分割线, <input>:获取用户输入 <img>:传图片
3. 自动补全：写一个单词再按Tab
4. 复制某一行标签：在那一行标签后面Ctrl + d
标签属性：
1. 通常为键值对形式存在，eg：color=”red“，id=‘eat’
2. 属性只能出现在开始标签和自闭合标签内
3. 属性名字全部小写，属性值必须用单引和双引包裹
4. 如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签）

块级标签和内联标签

块级标签:

p		  <p></p>					<!--段落标签-->
h1		  <h1></h1>					<!--标题标签h1~h6-->
table	  <table></table>			<!--表格标签-->
ol		  <ol></ol>					<!--有序列表-->
ul		  <ul></ul>				  	<!--无序列表-->
form	  <form action=""></form>	<!---->
div		  <div></div>				<!--分化区域的标签>
    
特点：
    1. 总是在新的一行上开始，独自占一行
    2. 高度，行高以及外边距和内边距都可控制
    3. 宽度却省，则是它容器的100%，浏览器拉多宽他就多宽
    4. 他可以容纳内联元素和其他内联元素

内敛标：

a		  <a href=""></a>
input/	  <input type="text">
img/	  <img src="" alt="">
sub		  <sub></sub>
sup		  <sup></sup>
textarea  <textarea name="" id="" cols="30" rows="10"></textarea>
span	  <span></span>				<!--可以多个元素放在一行>

特点：
	1. 和其他元素在一行上
	2. 高，行高以及外边距和内边距不可改变
	3. 宽度就是其文字或图片宽度，不可改变
	4. 内联元素只能容纳文本或者其他内联元素

行内元素注意（先做了解，css再补充）：
1. 设置宽度width无效
2. 设置高度height无效
3. 设置margin只有左右margin有效，上下无效
4. 设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。

常用标签之块级标签

标题标签（header）

一般用于文章的标题，<h1_6><h1/h6/>
段落标签（paragraph）

会把html文档分割成若干段落，
div标签

用于分化一个一个区域

列表标签

列表标签分为有序列表，无序列表以及定义列表

<!--无序列表标签-->（unordered list）
<ul>
    <li>橘子</li>				
    <li>苹果</li>
    <li>香蕉</li>
</ul>
<!--有序标签标签-->（Ordered List）
<ol>								快捷方式：ol>li*几行
    <li>苹果</li>
    <li>菠萝</li>
    <li>橘子</li>
</ol>
<!--定义列表标签-->（definition list）
写法1：
    <dl>							快捷方式：dl>dt*几类>dd*几行
        <dt>素类</dt>
            <dd>胡萝卜</dd>
            <dd>大白菜</dd>
            <dd>卷心菜</dd>
        <dt>荤类</dt>
            <dd>烤羊肉</dd>
            <dd>烤猪肉</dd>
            <dd>烤牛肉</dd>
    </dl>
写法2：
	<dl>
    	<dt>荤类
            <dd>胡萝卜</dd>
            <dd>大白菜</dd>
            <dd>卷心菜</dd>
        </dt>
        <dt>荤类
            <dd>烤羊肉</dd>
            <dd>烤猪肉</dd>
            <dd>烤牛肉</dd>
        </dt>
    </dl>

常用标签之行内标签

图片标签

<!--添加本地/网页图片-->（image）
<body>
    <img src="" alt="">	   <!--src是图片地址，alt是图片加载出错提示-->
</body>
	本地图片：输入本地图片地址（创建一个图片文件夹和html文件放一起）
	网页图片：去网上右键复制图片地址到这里

粗体/删除线标签

<!--斜体/删除线-->（b，strong，s）
<body>
    我是一段正常的话				  <!--正常字体-->
	<b>我是一段正常的话</b>		   	  <!--b物理加粗,看上去是加粗的-->
	<strong>我是一段正常的话</strong> <!--strong实际加粗，真正的加粗-->
    
	我是一段<s>正常的话</s>			  <!--s标签中文字上会显示一条删除线>
</body>

超链接标签

<!--超文本标签-->（<a>）
<body>
    <a href="网站域名" target="_self" title="有惊喜">百度</a>  
    _self-->本身的页面变成百度，把鼠标放在这个链接上面显示title内容
    <a href="网站域名" target="_blank" title="有惊喜">百度</a> 
    _blank-->跳转到新页面百度，把鼠标放在这个链接上面显示title内容
</body>
<!--用于网页之间的跳转-->

文本标签

<!--文字标签-->（span）
<body>
    <span>123</span>
    <span>456</span>  
</body>
<!--单纯的文本标签，不附带换行-->

三，特殊符号

什么是特殊符号？特殊符号就是网页上一些比较特殊的符号
为什么需要特殊符号？因为有时候我们需要特殊符号，比如我要把html代码显示在网页

特殊符号如何写？特殊符号以&开头;结尾

<!--特殊符号-->
<body>
    <p>我是一个&nbsp;&nbsp;段落标签</p> 	<!--几个&nbsp;代表几个空格-->
    <p>我是一个&emsp;段落标签</p>			<!--几个&emsp;代表几个字符宽度-->
    <p>我是一个&lt;段落标签</p>				<!--lt小于<号-->
    <p>我是一个&lt;段落标签</p>	            <!--gt大于>号-->
    <p>我是一个&copy;段落标签</p>	        <!--copy是©号-->
    <p>我是一个&quot;段落标签</pp>			<!--quot是双引号-->
</body>

四，表格

什么是表格？表格就是平常大家所看到的的二维表，比如excel表格之类
表格如今的地位？表格布局火于90年代，如今一般用于后台展示数据

表格初识？表格为表头，表身和表脚

<!--表格-->（table，tr，td）
<body>
<table>						快捷方式：table>tr*几>td*几	tr代表行 td代表列
    <tr>								
        <td>周一</td>		
        <td>周二</td>					
        <td>周三</td>
    </tr>
    <tr>
        <td rowspan="2">菠萝</td>		<!--rowspan="2"代表合并2行-->
        							 <!--合并以后要把羊肉那行删了-->
        <td colspan="2">橘子</td>		<!--colspan="2"代表合并2行-->
        <td>香蕉</td>					<!--要把香蕉注释掉---->
    </tr>
    <tr>
        <td>羊肉</td>
        <td>猪肉</td>
        <td>牛肉</td>
    </tr>
</table>
</body>								 <!--caption-->:表格标题

在这里插入图片描述

五，表单

表单是什么？表单是搜集用户数据信息的各种表单元素的集合区域。
表单的作用？用于收取用户数据并向后台发送，前后交互的方式之一。

表单的引用？表单常用于登录注册，搜索，文本上传登。

<!--搜狗引擎-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
    	<!--提交地址	提交方式-->
    <input type="text" placeholder="请出入您要查询的关键词" name="query">
    <input type="submit" value="搜索">
    	<!--提交的值-->
</form>
</body>
</html>

效果图：在这里插入图片描述直接能进入搜狗搜索东西

<!--百度引擎-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
    	<!--提交地址	提交方式-->
    <input type="text" placeholder="请出入您要查询的关键词" name="wd">
    <input type="submit" value="搜索">
    	<!--提交的值-->
</form>
</body>
</html>

效果图：在这里插入图片描述直接能进入百度搜索东西

表单常用标签：1，input 2，textarea 3，select
- input标签属性

表单的input标签的实例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
搜索 <input type="text" placeholder="请输入您要查询的关键词" name="wd">
    <input type="submit" value="搜索">
    <input type="radio" checked="checked">男
</form>

<!--文 本 框:<input type="text" value="" maxlength"可输入的最大长度" size="" />-->
<!--提交按钮:<input type="submit" value="提交" />-->
<!--普通按钮:<input type="button" value="普通按钮" />-->
<!--密 码 框:<input type="password" />-->
<!--重置按钮:<input type="reset" value="重置" />-->
<!--单选按钮:<input type="radio" />name必须设置成一样的,表示是一组单选按钮 checked="checked"默认选中-->
<!--文件上传域:<input type="file"/>-->
<!--多选按钮:<input type="checkbox" />name可以设置成不一样的,要求设置成一样的-->
<!--下 拉 框:<select><option></option></select>-->
<!--多行文本域:<textarea  rows="行" cols="列"></textarea>-->
<!--隐 藏 域:<input type="hidden" />-->
<!--图片按钮:<input type="image" src= "" onmouseover/>-->
</body>
</html>