HTML介绍

人生当苦

于 2019-09-04 20:15:35 发布

阅读量252

点赞数

分类专栏： web前端文章标签： HTML 前端 web

本文链接：https://blog.csdn.net/weixin_44260380/article/details/100546447

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML介绍

Hyper Text Markup Languge 超文本标记语言

**超文本：**不仅仅是纯文本，还包括字体相关的内容（颜色、大小等）和多媒体（图片、音频、视频），比如world
纯文本：只有文本，没有任何东西，只有文本，没有字体大小，没有字体颜色，比如txt

学习HTML主要学习的就是有哪些标签、标签有哪些属性、标签和标签的嵌套关系

HTML与XML的不同点：XML的标签是可以自定义的，HTML提供了，一部分现有标签

HTML页面介绍

<!DOCTYPE html> 文档声明：用于告诉浏览器使用html哪个版本的标准解析页面，此写法是用html5的标准解析页面
<html>  根标签，除了文档声明，其他内容都写在根标签里面
    <head>  头标签，给浏览器看的内容写在头标签里面
        <meta charset="UTF-8">  告诉浏览器页面的字符集
        <title>Insert title here</title>  告诉浏览器页面标题
    </head>
    <body>  体标签，给用户看的内容写在体标签里面

    </body>
</html>

HTML常见标签

1.内容标题

<h1> 一直到 <h6> 由大到小

在标签上面添加属性 align=“center”

center表示居中，right表示靠右…

2.段落标签

<p>

3.加粗和斜体

<b> 加粗 <i> 斜体

4.注释

快捷键ctrl+shift+/

5.换行

<br>

6.列表标签

无序列表 ul （unordered list）

有序列表 ol （list item）

有序列表中设置列表排序

reversed=“reversed” reversed表示倒叙

有序列表中设置列表开始位置

start=“10” 表示从10开始

这两中列表都可以通过type设定前面序号样式
无论哪种列表，在他们下面都是通过li来书写，里面每一项都是li标签

列表中的 type 设置标题

无序列表中默认标题为实心小圆点disc，我们可以设置为
disc 实心小圆点；circle 空心小圆点； square 实心小方块

有序列表中默认标题为1. 2. 3. …，我们可以设置为
a. b. c. …或i. ii. iii. … 等，具体看一下提示就晓得了

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>列表标签</title>
    	</head>
    	<body>
    		<!-- ul :无序列表标签
    			li 带标志的小标题
    			默认情况下列表标签前面是一个小圆点,实心圆disc
    			但是，我们可以通过type来控制
    		-->
    		<ul type="disc"> /*实心小圆点*/
    			<li>第一项</li>
    			<li>第二项</li>
    			<li>第三项</li>
    		</ul>
    		<ul type="circle">  /*空心小圆点*/
    			<li>第一项</li>
    			<li>第二项</li>
    			<li>第三项</li>
    		</ul>
    		<ul type="square">  /*实心小方块*/
    			<li>第一项</li>
    			<li>第二项</li>
    			<li>第三项</li>
    		</ul>
    		
    		<!-- ol :有序列表，带有序号的
    			序号样式由type定义，默认为123(数字)
    		-->
    		<ol type="a">
    			<li>第一项</li>
    			<li>第二项</li>
    			<li>第三项</li>
    		</ol>
            <ol>有序列表</ol>
            <ol type="1" reversed="reversed" start="10">
                <li>打开冰箱</li>
                <li>塞入大象</li>
                <li>关闭冰箱</li>
            </ol>
    	</body>
    </html>

定义列表

<dl>定义列表

<dt>定义标题

<dd>定义标题下内容

        <!-- 自带层级显示效果 -->
        <dl>定义列表</dl>
        <dl>
            <dt>定义标题</dt>
            <dd>定义标题下的信息</dd>
            <dt>凉菜</dt>
            <dd>皮蛋</dd>
            <dd>毛豆</dd>
            <dt>烧烤</dt>
            <dd>烤羊肉串</dd>
            <dd>烤大腰子</dd>
        </dl>

列表嵌套

有序列表和无序列表可以任意无限嵌套

        <!-- 列表嵌套 -->
        <ul>
            <li>荤菜
                <ol>
                    <li>鱼香肉丝</li>
                    <li>糖醋里脊</li>
                </ol>
            </li>
            <li>素菜
                <ol>
                    <li>清炒藕尖</li>
                    <li>干煸藕丝</li>
                </ol>
            </li>
        </ul>

7.图片标签

支持图片格式：jpg/jpeg、png位图（支持透明色）、gif动图

src属性：设置图片路径

相对路径：访问站内资源一般使用相对路径
在同级目录时，直接写图片名就行了
在上级目录时，在图片名前加“ …/ ”，一个“…/”表示一个上一级
在下级目录时，在图片前写直接写下级的目录再写图片名
绝对路径：访问站外资源一般使用绝对路径，也称为图片盗链（复制其他的网站图片链接）
好处：可以节省本站资源
坏处：可能找不到图片

alt属性：图片访问不到时，显示alt设置的文本内容

title：标题，鼠标在图片上悬停时显示的文本内容

width、height：设置高宽

赋值方式：像素或者上级元素的百分比
设置高宽时，设置一个，另一个会等比缩放

8.超链接标签

<a>

该标签需要添加 href 属性，不添加该属性，是纯文本，添加后是指向href资源路径的超链接

href属性：设置资源路径

页面资源：访问站内与站外都行

文件资源：浏览器如果支持则直接浏览，不支持浏览某文件则会触发下载

文本超链接和图片超链接

超链接标签包裹图片标签或文本

9.表格标签

<table> 表格标签

<caption> 表格标题

<th> 表头，加粗且居中

<tr> table row 表示行

<td> 表示列

边框属性：border

跨行/列属性：rowspan/colspan

注意跨行与列时，需要把跨的那几个标签删掉

10.表单标签

<form> 表单标签

作用：用于获取用户输入的相关信息，将信息提交到服务器

学习表单主要学习的就是表单的控件
文本框、密码框、单选框、多选框、下拉选框等
主要通过其属性定义

name属性

用与记录表单提交的信息，作为key
表单中的任何控件必须与name属性

<input> 输入框标签

type属性

设置input的格式

text ：为文本

password ：为密码

radio ：为单选框，如果不写name，可以两个都选择并且不可取消
所以使用单选框一定要记得使用name 属性，取名一样的两个单选框只能选一个

checkbox ：打钩选择框，多选框

file ：用于选取文件

date ：日期选择器，选择日期

number ：用来输入数字（比如年龄），其中min表示最小值，max表示最大值

color ：选择颜色

range ：滑动区域，用于调节音量等

submit：提交按钮

button ：按钮，用valun定义按钮内容
注：按钮还有不用input的，可直接用<button type=“button”></button>
尽量不用input直接使用button按钮，因为可以和链接和图片结合使用

placeholder属性

设置文本框中显示的背景文本

checked属性

checked=“checked” 默认选中

value属性

设置提交的值

disabled=“disabled” 禁用输入框

下拉选框设置

<select> 标签下拉选择框

<option> 标签添加选择内容，默认选择第一个，selected="selected"换成默认选择这个标签的

注意：提交的信息劲量不要含中文，遇见中文的，我们可以添加个value属性，设置为对应的英文

实体引用

空格：  空格折叠现象，多个空格只显示一个

大于号与小于号<> ： < >

分区标签

作用：将多个相关标签添加到一个分区标签中，便于统一管理，可以理解为一个容器

div标签

独占一行

span标签

共占一行

一般页面至少分为三大区

HTML5中新增分区标签（为了代码的可读性更高）

header 头

article 文章

section 文章

section 块、区域

footer 脚

nav 导航

H5页面区域标签

header 头

文章正文 article 或 section

footer 脚

人生当苦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML介绍

HTML介绍Hyper Text Markup Languge 超文本标记语言**超文本：**不仅仅是纯文本，还包括字体相关的内容（颜色、大小等）和多媒体（图片、音频、视频），比如world纯文本：只有文本，没有任何东西，只有文本，没有字体大小，没有字体颜色，比如txt学习HTML主要学习的就是有哪些标签、标签有哪些属性、标签和标签的嵌套关系HTML与XML的不同点：XML的标签是可以自...
复制链接

扫一扫