HTML基础

最新推荐文章于 2024-10-10 11:15:29 发布

炯+

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量51

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_56431115/article/details/131793194

版权

本文介绍了五大主流浏览器及其内核，包括Trident、WebKit、Blink和Gecko。接着讲解了Web基础，如网站构成、页面构成（HTML、CSS、JS）以及B/S和C/S架构的区别。此外，还详细讨论了HTML中的标签、表格用法、表单元素和属性，以及超链接的应用。

摘要由CSDN通过智能技术生成

1.浏览器

1.五大主流浏览器：

ie，opera，safari，火狐，谷歌

2.四大内核：

Trident(Ie内核)，webkit，blink，gecko(火狐内核)

2.web基础（超文本标记语言）

1.网站构成：

网站域名
网站程序
网站空间

2.页面构成（结构html，表现css，行为js）

3.b/s和c/s：

b/s（服务端）：不需要更新、下载和c/s（客户端）：更新下载

b/s 拼多多，淘宝

c/s 游戏更新下载，安全性较低（外挂）

4.Url

http：超文本传输协议
https：安全超文本传输协议
ftp：文件传输协议
file：计算机上的文件
由协议，服务器地址，端口，路径组成

3.HTML

head 头部包含文档的元（meta）数据，定义文档的头部，所有头部元素的容器，可用在头部的有base link meta script style title
base：描述基本的链接地址/链接目标，会对所有的url产生作用
link：关系到外部资源，通常用于链接到样式表，还可以定义窗口tab的logo标

1.标签

1.块级元素

div元素是块级元素，可以组合其它html元素的容器
独占一行，每个块级元素都会从一个新的一行从新开始。从上到下排布
可以控制高度宽度以及css属性
不设置宽度的话，块级元素的宽度是它父级元素内容的宽度
不设置高度的情况下，块级元素的高度是本身的高度
块级元素 div，p，h1-h6,ul,ol,dl,li,dd,table,hr,blockquote,address,table,menu,pre,header,section,aside,footer.

1.表格：

标签名	作用
cellspacing	边框与边框之间的间距
rowspan	行合并
colspan	列合并
caption	表名

<body>
    <table width="600"height="400" cellspacing="4px"border="1"align="center">
        <caption>
            <h2>
                课程表
            </h2>
        </caption>
    <tr>
        <td>项目</td>
        <td colspan="5">上课</td>
        
        <td colspan="2">休息</td>
        
    </tr>
        <tr style="background-color: #FCBFCF;">
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>体育</td>
            <td>体育</td>
            <td>音乐</td>
            <td>计算机</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            
            <td>语文</td>
            <td>数学</td>
            <td>体育</td>
            <td>体育</td>
            <td>音乐</td>
            <td>计算机</td>
           
        </tr>
        <tr>
            
            <td>语文</td>
            <td>数学</td>
            <td>体育</td>
            <td>体育</td>
            <td>音乐</td>
            <td>计算机</td>
            
        </tr>
        <tr>
            
            <td>语文</td>
            <td>数学</td>
            <td>体育</td>
            <td>体育</td>
            <td>音乐</td>
            <td>计算机</td>
            
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>体育</td>
            <td>体育</td>
            <td>音乐</td>
            <td>计算机</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
           
            <td>语文</td>
            <td>数学</td>
            <td>体育</td>
            <td>体育</td>
            <td>音乐</td>
            <td>计算机</td>
            
        </tr>
    </table>
</body>

加载如下图所示：在这里插入图片描述

2.表单（form）

标签名	属性
text area（文本域）	提供了一个可输入文字的空间，resize可以调属性(禁止缩放等)
input	输入框
type	input下的输入类型属性（text,radio(单选按钮)，checkbox（复选）,name可以用来分组，password，submit，select(下拉菜单搭配option)，reset（重置,需要在form中使用），buttom（普通按钮）,hidden隐藏文本框，file（文件上传框）
label	把输入框放在标签里可以点击任何页面起到选中效果
value	input：跟type的属性有关系的，取值为button，reset，submit，显示按钮上的文本
post	提交的信息不会显示在地址栏，请求慢，安全，请求长度有限制
get	提交信息会显示在地址栏，请求块，不安全

2.行内元素

有多大占多大，只能容纳文本以及其它块级元素。不能设置宽高，高度默认为文本的宽高。

span a b strong i em(斜体强调) del br u(下划线) textarea input select(下拉列表) sub(下标) sup（上标) small 小字体文本

img 属性：
```
 <img src="" alt="">
```
默认显示图片本身的尺寸
alt ：seo（搜索引擎优化）,图片加载不出来的时候提示文本（title，description,keywords）

<meta name="description" content="小米，美女">
    <title>小米，京东</title>
 <meta name="keywords" content="小米，美女">

title : 鼠标放上去提示的文本

src 也可以使用base编码、本地连接、网络链接

3.行内块元素

display：inlineblock

清除行内块的间距方式

1.浮动

2.将父元素的font-size设置为零（子元素也得设置font-size。不然会出现子元素缺失）

3.利用flex布局：父元素增加flex布局

4.标签连写

4.属性

em和rem

1.em相对单位，相对于font-size值发生改变，font-size值乘em前缀值:代码以及视图如下：

 <style>
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>

2.rem相对于根元素（html）的font-size值

5.可视区宽高度

1vm：可视区宽度的百分之1

1vh: 可视区的高度

vmin：当前vw，vh最小值

vmax：当前vw，vh最大值

6.长度单位

百分比：50%与50vm区别在于50%是对于父元素。body有外边距

<style>
        .box1{
            width: 50%;
            height: 100px;
            border: 1px solid rgb(175, 175, 184);
        }
        .box2{
            width: 50vw;
            height: 10em;
            border: 1px solid blue;
    }
    </style>

<div>
    盒子1
</div>
<div>
    盒子2
</div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o3bIfPvG-1689674061378)(C:\Users\炯哥\AppData\Roaming\Typora\typora-user-images\image-20230712094405380.png)]$

2.快捷方式

`p[id=$]{woshineirong}*5=>`


<body>
    <div>
        盒子1
    </div>
    <div>
        盒子二
    </div>
    <p id="1">woshineirong</p>
    <p id="2">woshineirong</p>
    <p id="3">woshineirong</p>
    <p id="4">woshineirong</p>
    <p id="5">woshineirong</p>

</body>

7.超链接

1.href表示跳转的链接地址，链接本地文档

2.邮箱链接：<a href="mailto:3497276985@qq.com">发邮件吧</a>

3.友情链接，href="友情链接网站的网址"必须加上http或https

4.链接本页面某个位置：设置锚点链接指向锚点

<p id="2">woshineirong</p>
<p id="3">woshineirong</p>
<p id="4">woshineirong</p>
<p id="5">woshineirong</p>

```

7.超链接

1.href表示跳转的链接地址，链接本地文档

2.邮箱链接：<a href="mailto:3497276985@qq.com">发邮件吧</a>

3.友情链接，href="友情链接网站的网址"必须加上http或https

4.链接本页面某个位置：设置锚点链接指向锚点

炯+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML基础

1.浏览器

1.五大主流浏览器：

2.四大内核：

2.web基础（超文本标记语言）

1.网站构成：

2.页面构成（结构html，表现css，行为js）

3.b/s和c/s：

4.Url

3.HTML

1.标签

1.块级元素

1.表格：

2.表单（form）

2.行内元素

3.行内块元素

display：inlineblock

4.属性

em和rem

5.可视区宽高度

6.长度单位

7.超链接

7.超链接