菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

HTML(超文本标记语言)_html语言精准描述了文档的结构格式但并不能精确的定义文档信息如何显示和排

作者：菜鸟追梦旅行 | 2024-02-20 15:53:34

踩

html语言精准描述了文档的结构格式但并不能精确的定义文档信息如何显示和排

1、HTML的作用：

是专门给文本添加语义的，而不是修改文本形式，这些用于描述其他文本语义的文本，我们称之为标签，这些标签在浏览器中不会被显示，所以被称为超文本标记语言。

2、文档结构：

<html>标签：用于告之浏览器这是一个网页

注意点：其他所有的标签都必须写在html标签里面

<head>标签：用于给网站添加一些配置信息

例如：指定网站的标题/指定网站的小图片/指定网站关键字/指定网站的描述信息等

注意点：一般情况下，写在head标签内部的内容不会显示给用户看

<title>标签：专门用于指定网站的标题

注意：title标签必须写在head标签里面

<body>标签：专门用于定义html文档中需要给用户查看的内容

3、基础标签：

H系列标签作用：用于给文本添加标题语义

格式：<h1>XXX</h1> H标签一共有6个，从h1到h6，超过6无效被H系列标签包裹的内容会独占一行，h1最大,h6最小

p标签作用：告诉浏览器哪些文字是一个段落

格式：<p>xxx</p> 注意点：在浏览器中会独占一行

hr标签作用：在浏览器上实现一条分割线格式<hr/>

注意点：在浏览器中会单独占一行，hr标签可以写/也可以不写前者是按HTML规范，后者是XHTML规范

br标签作用：换行格式<br> 注意点：可以连续使用

img标签格式：<img src="" alt="提示信息" title="名">

作用：告诉浏览器需要显示一张图片，src是需要显示的图片地址属性：width：宽度 height：高度 title：当鼠标悬停在图片上时，需要弹出的描述框显示内容 alt: alternate的缩写，告诉浏览器当图片找不到时所显示的内容

<!-- 绝对路径：（Windows）盘符：/文件夹名/..../文件名

图像文件在另一台主机上：绝对路径：协议://主机/地址/文件名

（有问题，图像文件换一个位置，原来的绝对路径失效）

相对路径：./:当前文件夹 ../:当前文件夹的上一个文件夹

c:\www\site\pages\test.html

c:\www\site\images\girl.jpg

在test.html页面中显示girl.jpg图像

相对路径：../images/girl.jpg

绝对路径：c:\www\site\images\girl.jpg

-->

路径问题

1、相对路径赋值；每次都从.html文件所在的文件夹开始查找

a.同级：即图片和HTML文件存储在同一个文件夹中格式：src=”xxx.jpg” 图片名称

b.下级：即存储图片的文件夹和.html文件在同一个文件夹中格式：src=”xxx/xx.jpg” 存储图片文件夹名称/图片名称

c.上级：存储图片的位置和存储代码的文件夹在同一个文件夹中格式：src=”../xxx.jpg” 找到.html文件所在文件夹的上一级文件夹，再从该文件夹中找到xxx.jpg图片

2、绝对路径赋值：每次都从指定盘开始查找格式：src=”C:\xx\xx\xx\xx\...”

a标签：定义超链接，用于从一张页面链接到另一张页面

格式：<a href=”指定需要跳转目标界面”>需要展示内容</a>

a标签最重要的属性是 href 属性，它指示链接的目标。

target属性：用于控制如何跳转

_self:在当前选项卡中跳转，即不新建界面跳转，默认就是_self

_blank:在新的选项卡中跳转

title属性：与img标签中的title一样，都是用来控制鼠标悬停时显示的文本

base标签：专门用来同一指定当前网页中所有超链接如何打开

注意点：必须写在head标签中间，如果即在base标签又在a标签中指定了target属性，那么浏览器会按照a标签中指定的执行

假链接：就是点击之后不会跳转的链接我们称之为假链接

假链接的格式: 1.# 2.javascript:

区别：#的假链接会自动回到网页的顶部, 而javascript:的假链接不会自动回到网页顶部

锚链接：要想通过a标签跳转到指定的位置

1>给目标位置的标签添加一个id属性, 然后指定一个独一无二的值

2>告诉a标签你需要跳转到的目标标签对应的值是多少，并在该值最前面加上#


    <a href="#tp">锚链接</a><!-- 点击锚链接 -->
    <h1>标题<small>标签</small></h1>
    换行<br>
    <code>&lt;header&gt;</code> 
    <hr>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <a name="tp">锚链接续位置</a><!-- 跳转到此位置 -->

<!-- 在同一个页面不同位置之间，锚链接

在某个位置定义一个锚链接

<a name="锚名称">锚链接续位置</a>

从A.html跳转到B.html的锚名称叫full,超链接可以同时完成页面跳转和锚跳转

-->

邮件超链接：<a href="mailto:2845@qq.com">邮件超链接</a>

列表标签：作用：给一堆数据添加列表语义，就是告诉浏览器这堆数据是一个整体

分类：无序列表（最多）(unorderd list)

有序列表（最少）(ordered list)

定义列表（其次）(definition list)

1、无序列表：给一堆数据添加列表语义，并且这些数据没有先后之分

格式：<ul>

<li>需要显示的条目内容</li>

</ul> 无序列表应用场景：新闻列表，商品列表，导航

2、有序列表：给一对数据添加列表语义，数据有先后之分

格式：<ol type="A|1|a|i|Ⅰ">

</ol> 用法与无序列表大致相同

type属性取值1、A、a、i、Ⅰ

3、定义列表：给一堆数据添加列表语义，先通过dt标签定义标题，再通过dd添加描述

格式：<dl>

<dt></dt> (definition title)

<dd></dd> (definition description)

</dl>

定义列表应用场景：做网站尾部的相关信息，做图文混排

表格标签：给一堆数据添加表格语义

格式: <table>

<tr>

<td>需要显示的内容</td>

</tr>

</table>

其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行

其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

注意点

1、表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框

2、表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

3、另表格标签还有宽度与高度属性，水平对齐和垂直对齐属性，外边距和内边距属性，但仅供了解，因为样式控制一般都是用css来实现


 <!-- 表格标签 -->
    <table>
        <tr>
            <th>列名称</th>
        </tr>
        <tr>
            <td>列中的数据</td>
        </tr>
    </table>
 <!-- 例如 -->
    <table>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>01</td>
            <td>男</td>
        </tr>
    </table>
<!-- 课程表制作 -->
    <table border="1">
        <tr>
            <th colspan="2">时间</th><!-- colspan合并同一行2 -->
            <!-- <th></th> -->
            <th>课程名称</th>
            <th>教室</th>
            <th>说明</th>
        </tr>
        <tr>
            <td rowspan="2">上午</td><!-- rowspan合并同一列2 -->
            <td>8点</td>
            <td>HTML</td>
            <td>E-405</td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td>10点</td>
            <td>Javascript</td>
            <td>红楼304</td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>14点</td>
            <td>CSS</td>
            <td>E-401</td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td>16点</td>
            <td>自习</td>
            <td>红楼306</td>
            <td></td>
        </tr>
    </table>

效果展示：

表单标签

1.什么是表单?

表单就是在网页上用于输入信息的区域，主要功能是用来收集用户信息的

2.什么是表单元素?

2.1什么是元素?

在HTML中标签/标记/元素都是指HTML中的标签

例如: <a> a标签/a标记/a元素

表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能,表单元素一定要写在表单中;

3.表单的格式: <form action=”url地址” method=“提交方式” name=“表单名称”>

<表单元素> <!-- method常用的取值有GET和POST

GET请求用于提交非敏感数据和小数据

POST请求用于提交敏感数据和大数据-->

</form>

<!-- 表单标签

get不安全，在网页地址栏能看见

post数据封装在数据包中，抓包软件，chrome使用开发者工具查看，网络，载荷

表单元素一般要有name属性值，没有name属性值，value值不能提交-->

4.常见的表单元素

input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了 input标签的功能和外观不同。

type取值：

text:文本框

password：密码

radio：单选框

checkbox：复选框

submit：提交

reset；重置

button：按钮

file：文件

hidden：隐藏

input 标签type属性的取值

1、明文输入框：<input type="text">

2、暗文输入框：<input type="password">

3、设置默认值：<input type="xxx" value="xxx">

4、单选框：<input type="radio" >

注意点:

1）默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值

2）要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性

5、多选框：<input type="checkbox">

6、定义一个普通按钮例：<input type="button" value="xxx" οnclick="xxx)">

作用:配合JS完成一些操作

7、定义一个图片按钮例： <input type="image" src="xxx" οnclick="xxx">

8、定义重置按钮 <input type="reset" value="清空">

作用:清空表单中的数据

注意点: 重置按钮有默认的按钮标题, 默认叫做重置也可以通过value属性来修改默认标题

9、定义提交按钮；

作用:将表单中的数据提交到远程服务器

注意点: 要想把表单中的数据提交到远程服务器,必须满足两个条件

1）告诉表单需要提交到哪个服务器,可以通过form标签的action属性来告诉表单,需要提交到那个服务器

2）告诉表单,表单中的哪些数据需要提交，即加上name属性

label标签:

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

2.绑定的格式:

2.1将文字利用label标签包裹起来

2.2给输入框添加一个id属性

2.3在label标签中通过for属性和输入框中的id进行绑定即可

例：<label for="account">账号:</label><input type="text" id="account">

textarea标签：定义一个多行输入框可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入

例：<textarea cols="30" rows="10"></textarea>

datalist标签:给输入框绑定待选项

格式：<datalist>

<option>待选项内容</option>

</datalist>

如何给输入框绑定待选列表

1.写一个输入框

2.写一个datalist列表

3.给datalist列表标签添加一个id

4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

select标签：用于定义下拉列表

格式: <select>

</optgroup>

</select>

注意点:

1.下拉列表不能输入内容, 但是可以直接在列表中选择内容

2.可以通过给option标签添加一个selected属性来指定列表的默认值

3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

<fieldset> 标签：定义围绕表单中元素的边框

格式：<form>

</fieldset>

</form>

多媒体标签:

video标签：播放视频

格式：<video src=””></video>

属性： src:需要播放的视频地址

autoplay:自动播放的视频

controls:显示控制条

poster:视频没有播放前的占位图片

loop：一般用于做广告视频，循环播放

preload:预加载视频

muted：静音

width：宽度

height：高度

第二个格式：<video>

</video>

三种视频格式 :

audio标签：播放音频

格式：<audio src=””></audio>

和vedio使用基本一样，但有三个属性不能用：height/width/poster

详情和概要标签

格式: <details>

详情信息

</details>

作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击

4、字符实体：

在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体

空格, 一个就是一个空格

< 小于符号 < (less than)

> 大于符号 > (greater than)

注释格式：<!-- xxx --!>

快捷键：ctrl+/

另补充一些常用快捷键：

选中全部：ctrl+A

快速删除光标所在行(剪切)：ctrl+X

快速搜索：ctrl+F

撤回上一步操作：ctrl+Z

让光标在多行闪烁，按alt键不放，再按鼠标左键

5、五大主流浏览器：

1）Internet Explorer 简称ie，微软公司旗下浏览器

2）google chrome，google旗下浏览器，追求简洁、快速、安全

3）firefox浏览器，简称FF浏览器，mozilla公司旗下浏览器

4）safari浏览器，苹果公司旗下浏览器

5）opera浏览器，挪威厂商opera旗下浏览器

浏览器内核：浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，以及页面的格式信息

1）IE浏览器内核：Trident内核，也是俗称的IE内核；

2）Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3）Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4）Safari浏览器内核：Webkit内核；

5）Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/120251

HTML(超文本标记语言)_html语言精准描述了文档的结构格式 但并不能精确的定义文档信息如何显示和排

1、HTML的作用：

2、文档结构：

3、基础标签：

4、字符实体：

5、五大主流浏览器：

HTML(超文本标记语言)_html语言精准描述了文档的结构格式但并不能精确的定义文档信息如何显示和排