HTML基础

最新推荐文章于 2022-02-11 18:08:55 发布

尔尔er

最新推荐文章于 2022-02-11 18:08:55 发布

阅读量803

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_48341237/article/details/119108872

版权

HTML基础

一、HTML简介

1.HTML发展史

1991年HTML->1993HTML+ ->1995年HTML2.0->1997年1月HTML3.2->1997年1月HTML4.0->2014年HTML5

2.五大浏览器

IE、火狐、谷歌、Safari、Opera
浏览器组成：浏览器的外壳+浏览器内壳(渲染引擎+JS引擎）

五大浏览器内核

浏览器	渲染引擎
IE	Trident
Firefox	Gecko
Chrome	Blink(Webkit)
Safari	Webkit
Opera	Blink(Presto)

3.浏览器渲染流程

浏览器渲染流程分四步:
1、解析HTML为DOM树
2、渲染树结构：对每一个DOM元素进行渲染
3、布局渲染树
4、绘制渲染树

4.Web标准

Web标准不是某一个标准，是由W3C(World Wide Web Consortium, 万维网联盟)和其他标准化组织指定的一系列标准的集合。

4.1 Web标准的好处

容易被搜索引擎搜索
降低网站流量费用
方便计算机阅读
开发者方便管理

4.2 Web标准的构成

包括结构(HTML)、表现(CSS)、行为(Javascript)三个方面

SEO

SEO–搜索引擎优化
达到广告点击、销售产品/服务，提升品牌的建设

二、HTML

HTML指超文本标记语言，HTML不是编程语言，而是标记语言。

1.HTML骨架

<html>
<head>
	<title>标题</title>
</head>
<body>
</body>
</html>

vscode生成HTML骨架快捷方式
1.英文状态下的! + Enter
2.html:5 + Enter

<!--声明HTML版本为HTML5，不分大小写-->
<!DOCTYPE html>
<!--html根元素,lang表示网页为英文-->
<html lang="en">
 <!-- 文档头部 ：规定网页标题、编码方式、兼容方式、屏幕适配等-->
<head>
	<!--charset字符编码，gbk和gb2312-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动端 自适应视口-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--网页标题-->
    <title>Document</title>
</head>
<body>
    <!--网页主体-->
</body>
</html>

2.标签分类

标签可分为单标签和双标签，也可分为块级标签、行内标签、以及行内块标签
单标签：meta、hr、br、input、img
双标签:html、body、head、div、span、a

块级标签
div、h1~h6、p、hr、div、ul、li、ol、dl、dd、dt
1.独占一行
2.可设置宽高
3.可以设置margin、padding
行内标签
span、i、b、s、u、strong、em、del、ins、a
1.不独占一行
2.不可以设置宽高
3.可以设置左右的margin，上下的不可以，不可设置padding
行内块标签
img、input
1.能设置宽高
2.不独占一行

3.标签的关系

嵌套关系(父子关系）：head和title
并列关系(兄弟关系)：head和body

三、认识HTML

1.HTML常用标签

1.1标题标签
h1~h6为标题标签，一般用于新闻的标题

	<h1>新闻标题1</h1>
    <h2>新闻标题2</h2>
    <h3>新闻标题3</h3>
    <h4>新闻标题4</h4>
    <h5>新闻标题5</h5>
    <h5>新闻标题5</h5>
    <!--快捷方式 h${新闻标题$}*6-->

1.2.段落标签

<p>
今年第6号台风“烟花”已于7月26日9时50分前后登陆嘉兴平湖沿海，
登陆时强度为强热带风暴级，中心气压978百帕，中心最大风速28米/秒！
</p>

段落标签的特点：段落前后都会空一行，自适应浏览器窗口的大小
p标签内部不能嵌套p，也不能放块级标签(div、p、h1~h6、ul、li、ol、dl、dd、dt)
1.3.水平线标签

<hr><!--单标签-->

1.4.换行标签

<br><!--单标签-->

1.5.文本格式化标签

	<i>斜体</i>
    <b>加粗</b>
    <s>删除线</s>
    <u>下划线</u>
    <em>斜体</em>
    <strong>加粗</strong>
    <del>删除线</del>
    <ins>下划线</ins>

1.6.div和span
div和span都用来做界面分区

	<div>我是一个div</div>
    <div>我是一个div</div>
    <span>我是一个span</span>
    <span>我是一个span</span>

1.7.图片标签img

<img src="1.jpg" alt="图片" title="我是图片" width="200px" height="200px" border="2">

src规定图片地址，alt当图片链接失效时，做补充说明，title是鼠标移动到图片上时展示的信息

相对路径：相对于当前文件夹的位置
在文件夹下/，在当前所在的文件夹的上一级，用…/;上一级的上一级…/…/

<img src="../img/1.jpg" alt="图片">

绝对路径：网络路径（http、https、file）、盘符

<img src="D:\img\bizhi\u=2865849438,1642958696&fm=26&gp=0.jpg" alt="图片">
<img src="https://img2.baidu.com/it/u=2116882029,1761299726&fm=26&fmt=auto&gp=0.jpg" alt="图片">

1.8.链接标签
a标签可以嵌套任何标签，除了它自己

<a href="https://www.baidu.com/">百度一下</a>

href：规定跳转的链接地址
target：规定跳转方式
_self:当前页面打开
_target：新窗口打开

href占位符#，跳转到当前页面

href和src的区别是什么？

href实现的是两个资源之间的关联关系，不会显示在当前页面。src是运行资源，会显示到当前页面。

点击图片跳转

<a href="">
	<img href="" alt="">
</a>

a标签的下载功能
a标签在href值浏览器不能解析的时候，直接对应的就是下载功能
可以解析的：html、图片、txt文档、pdf
不能解析的.rar .doc .zip .exe .iso

锚点
id值页面唯一，否则，只认第一个。文字、图片等均可作为锚点。

<!--1、在跳转目标的位置添加id名标注
2、使用<a href="#id名">链接文本</a>-->
<a href="#text1">锚点</a>
<p id="text1">锚点所要跳转的目标</p>

1.9.base标签
为页面上的所有的相对链接规定默认 URL 或默认目标。

<base target="_blank" href="">

1.10.特殊字符(实体字符)

字符	字符的代码
>	`>`
<	`<`
空格	` `

2.列表标签

2.1. 无序列表

	<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

type值的属性

属性值	描述
disc	默认值，实心圆
circle	空心圆
square	实心方块

2.2.有序列表

	<ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ol>

type属性值

属性值	描述
1	默认值，按数字排列的有序列表(1、2、3…)
A	按大写字母顺序排列(A、B、C…)
a	按小写字母顺序排列(a、b、c…)
I	罗马字母，大写(I，II，III，IV)
i	罗马字母，小写(i，ii，iii，iv)

2.3.定义列表dl&dt&dd

    <dl>
        <dt>前端</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
        <dd>javascript</dd>
        <dt>后端</dt>
        <dd>java</dd>
    </dl>

3.表格标签

    <table border="1"  cellspacing="0" cellpadding="0">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
    </table>

表格的属性

属性	值	描述
borer	像素值	表格边框的宽度
cellpadding	像素值	单元格边缘与其内容之间的空白
cellspacing	像素值	单元格之间的空白
bgcolor	rgb、十六进制、英文单词	表格的背景颜色
bordercolor		边框颜色
background	background=“图片地址”	设置背景图片

align属性在table上作用为表格整体的居中，在tr上作用为文本的居中.

表格结构
table>thead & tbody & tfoot tr>th&td

<caption></caption>		<!--表格的标题-->
<thead></thead>   <!--定义表格的头部-->
<tbody></tbody>   <!--定义表格的主体-->
<tfoot></tfoot>	  <!--定义表格的页脚-->

合并单元格
合并行：rowspan
合并列：colspan
案例：

	<table border="1">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>尔尔er</td>
                <td>20</td>
                <td>女</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小李</td>
                <td>22</td>
                <td>女</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="4">页脚</td>
            </tr>
        </tbody>
    </table>

4.表单标签

   <form action="" method="" name="">

    </form>

action：规定表单的提交地址，一般给后端地址
method：前端和后端的通信方式，get请求和post请求
get请求：服务器地址?username=""&pwd=""，不安全
post请求：请求体

4.1.input控件

单行文本的输入，不支持换行

属性	作用
placeholder	提供可描述输入字段预期值的提示信息
name	规定input的输入值名，在单选框和多选框中用于设置其为一组
value	规定输入字段的初始值
readonly	属性规定输入字段为只读（不能修改）
checked	设为选中状态，用在单选框和复选框中
size	规定输入框的长度
maxlength	规定输入字段允许的最大长度

**注意：**placeholder 属性适用于以下的 input 类型：text, search, url, telephone, email 以及 password。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

***type***属性可以规定用户的输入值格式

属性值	作用
text	定义单行的输入字段，用户可在其中输入文本。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
checkbox	定义复选框
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
button	定义可点击按钮
image	定义图像形式的提交按钮
file	定义输入字段和 "浏览"按钮，供文件上传

(1)text文本域

账号：<input type="text" name="username" placeholder="请输入您的账号">

(2)password

 密码：<input type="password" name="pwd" placeholder="请输入密码">

(3)radio单选框

通过同一个name值定义同一个组，单选按钮允许用户选取给定数目的选择中的一个选项。

性别：
<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="male" checked>女</label>
<!--label标签的作用，单选框只有在点圆圈的时候才会起作用，label使在点击男或女的文字上时也会生效-->
<!--checked默认选中-->

(4)checkbox复选框

定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

爱好：
<label><input type="checkbox" name="hobby" value="java">JAVA</label>
<label><input type="checkbox" name="hobby" value="c">C</label>
<label><input type="checkbox" name="hobby" value="html">HTML</label>
<!--label作用：点击java或C或HTML时也能选用-->

(5)submit提交

定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<input type="submit" value="提交">

(6)reset重置

<input type="reset" value="重置">

(7)file文件上传

<input type="file">

(8)图片按钮

<input type="image" src="./cat.jpg">

(9)普通按钮

 <input type="button" value="自定义">

4.2.button按钮

type属性值为button时实现自定义功能的按钮，默认值为submit

<button type="button">自定义</button>

4.3.textarea文本区域

实现多行文本的输入

rows规定行
cols规定列

<textarea name="introduce" id="" cols="30" rows="10" placeholder="描述下你呢"></textarea>

4.4.下拉框

<select name="provice" id="" multiple> <!--multiple设置多选，按住Ctrl-->          
            <option value="">---请选择---</option>
            <option value="gansu">甘肃省</option>
            <option value="guizhou">贵州省</option>
            <option value="sichuan">四川省</option>
</select>

4.5.label

for属性来聚焦输入框

尔尔er

关注

0
点赞
踩
2

收藏

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

HTML基础SEO–搜索引擎优化达到广告点击、销售产品/服务，提升品牌的建设HTML发展史1991年HTML->1993HTML+ ->1995年HTML2.0->1997年1月HTML3.2->1997年1月HTML4.0->2014年HTML5五大浏览器IE、火狐、谷歌、Safari、Opera浏览器组成：浏览器的外壳+浏览器内壳(渲染引擎+JS引擎）五大浏览器内核浏览器渲染引擎IE TridentFirefox GeckoChrome Blink
复制链接

扫一扫