前端之HTML

最新推荐文章于 2024-08-20 19:23:57 发布

YSIR007

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量353

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ysir007/article/details/127321696

版权

HTML

HTML: “Hyper Text Markup Language”(超文本标记语言)

标签=元素

语法：

<标签符>内容</标签符>

标签成对出现，结束符号的标签符前面会有/

HTML页面通常有四个部分：

一个文档声明：<!DOCTYPE html>

一个HTML标签对：<html></html>

一个head标签对：<head></head>

一个body标签对：<body></body>

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

head

<head> 标签表示页面的“头部”

一般来说，有以下六个标签能在 <head>内

<title>,<meta>,<link>,<style>,<script>,<base>

title：定义网页的标题
meta：定义页面的特殊信息，例如关键字、页面介绍等，提供给搜索引擎看的

里面有两个重要属性：name和http-equiv

name: 有两个关键词：keywords，description

http-equiv:
定义网页所使用的编码
<meta charset =“utf-8”/>
定义网页自动跳转
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>

style: 定义元素的CSS样式
script：定义页面的JavaScript代码，也可以引入外部JavaScript文件
link：从外部引入CSS样式文件
base：无意义

body

<body> 标签表示页面的“身体”

防止页面出现乱码

注释

文本介绍

在HTML中，有6个级别的标题标签，h1~6，h1重要性最高，h6最低

一个页面一般只有一个h1标签，h2~h6标签可以有多个

h1与title的区别在于：

h1 表示文章的标题

title 表示该网页的标题

动态页面

动态页面与静态页面的区别在于：是否与服务器进行数据交互

以下四种不一定是动态页面

带有视频和音频
带有flash动画
带有CSS动画
带有JavaScript特效

水平线标签 <hr/>

这是换行标签 <br>
分区标签 <div>
划分区域，然后结合CSS针对该区域进行样式控制

自闭合标签

😀一般标签：由于有开始符号和结束符号，因此可以在内部插入标签或文字

😀自闭合标签：只有开始符号没有结束符号，不可在内部插入标签或文字

块元素与行内元素

HTML内元素表现形式一般分2类

😀块元素：独占一行，排斥其他元素（包括块元素和行内元素）与其同一行

内部可以容纳其他块元素和行内元素

块元素：<h1>~<h6>,<div>,<ul>,<ol>,<li>,<p>

😀行内元素：可以与其他行内元素位于同一行

行内元素：<a>,<b>,<em>,<i>,<span>,<sup>,<sub>,<br>

特殊符号

网页内特殊符号对应的代码都是以 & 开头，并且以 ; 结尾例如： &nbsp

列表

😁列表分为有序列表，无序列表，定义列表

有序列表

有先后顺序，一般采用数字或字母作为顺序，默认采用数字顺序

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ol>

无序列表

没有先后顺序，默认情况无序列表的符号为 “ ○”

ul的子元素只能是li，不能是其他元素

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

定义列表

由两部分组成：名词和描述，在某些高级效果（自定义表单）会用到
<dl>
 <dt>名词</dt>
 <dd>描述</dd>
</dl>

	<dl>
        <dt>HTML</dt>
        <dd>制作网页的标准语言，控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>

最后效果：

HTML
	制作网页的标准语言，控制网页的结构
CSS
	层叠样式表，控制网页的样式
JavaScript
	脚本语言，控制网页的行为

type属性

一般情况，改变type属性来改变列表项符号

<ol type="a">  <!--会变成字母顺序的有序列表-->
<ul type="circle">  <!--会变成“○”的无序列表-->

1	数字有序列表
a	小写英文字母列表
A	大写英文字母列表
i	小写罗马数字列表
I	大写罗马数字列表
disc	“●“
circle	“○”
square	“■”

HTML语义化

<div>1.html</div>       <!--没有语义化-->
<div>2.css</div>
<div>3.javascript</div>
<div>4.jquery</div>
<div>5.vue.js</div>
<hr>
<ol type="1">      <!--语义化-->
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>jquery</li>
    <li>vue.js</li>

表格

表格有三个部分组成：

表格：table
行： tr
单元格：td

默认情况下，表格没有边框。其中表格边框、颜色、大小都是由CSS控制

表格的完整结构一般有：<table>,<tr>,<td>,<caption>,<th>

<!--表格基本结构-->
<table>
    <caption>标题</caption>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>       
    </tr>
</table>

<td>和<th>的区别：

显示上：浏览器会以“粗体”和“居中”来显示标签的内容，但是标签不会

语义上：标签用于表头，而标签用于表行

表格语义化

表示表头，表示表身，表示表脚
使表格代码更具可读性，逻辑性，可维护性

合并行

使用rowspan属性合并行，纵向合并n个单元格。

<td rowspan="跨越的行数">内容</td>
使用colspan属性来合并列，横向合并n个单元格。

<td colspan =“跨越的列数">内容</td>

表单

表单:指的是文本框,按钮,单选框,复选框,下拉列表等统称

input标签

text表示单行文本框
password表示密码文本框
radio表示单选框
checkbox表示多选框
file表示文件上传

<form action="" name="123" method="GET" target="">
    <!--单行文本框-->
    <input type="text" value="" placeholder="输入文本"><br>
    <input type="number" value="" placeholder="输入数字"><br>
    <!--密码文本框-->
    <input type="password" placeholder="输入密码"><br>
    <!--单选框-->
    <input type="radio" name="组名" value="取值" checked/>男生
    <input type="radio" name="组名" value="取值" />女生
    <!--多选框--><br />
    <input type="checkbox" name="组名" value="取值">爱好1
    <input type="checkbox" name="组名" value="取值">爱好2
    <!--按钮--><br />
    <input type="button" value="这是普通按钮button">
    <br />
    <input type="submit" value="这是提交按钮submit"><br />
    <input type="reset" value="这是重置按钮reset"><br>
    <!--下拉列表-->
    <select name="" id="">
        <option value="">选项1</option>
        <option value="">选项2</option>
        <option value="">选项3</option>
    </select><br>
		<textarea cols="30" rows="5">多行文本框</textarea>
</form>