HTML - 1

HTML - 1 基础内容

标签与标签属性

属性

不区分大小写 (推荐小写)
可以用双引号也可以用单引号 (推荐双引号)
重复的属性，后边的会失效

通用属性：id: 给标签打上唯一标识 (head html meta script style title不能加)

class：指定标签类名，与样式配合

style：控制样式

dir：内容的方向 (ltr, rtl) (head html meta script style title不能加)

title：给标签一个文字提示内容 (超链接和图片用得多)

lang： (head html meta script style title不能加)

独有属性：

文档声明

放在 html 文件第一行

<!DOCTYPE html> <!-- H5 -->

作用：告诉浏览器当前网页的版本

字符编码

存储时，采用合适的字符编码 (否则数据会丢失)
存储采用哪种编码，读取就采用哪种方式解码

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>字符编码</title>
    </head>
    <body>
        
    </body>
</html>

设置语言

让浏览器显式对应的翻译提示
有利于搜索引擎优化

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset = "utf-8">
        <title>设置语言</title>
    </head>
    <body>
        
    </body>
</html>

favicon.ico

排版标签

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset = "utf-8">
        <title>排版标签</title>
    </head>
    <body>
        <h1>一级标题 (一个最好)</h1>
        <h2> </h2>
        <h3> </h3>
        <!-- 使用较少 -->
        <h4> </h4>
        <h5> </h5>
        <h6> </h6>
        
        <p>
            段落标签
        </p>
        
        <div>
            没有含义
        </div>
        
    </body>
</html>

语义化标签

语义：含义

h1-h6: 标题

p: 段落

div: 没有语义

语义化 (标签的默认效果不重要，语义最重要)

好处：1. 代码可读性强；2. 有利于SEO；3. 方便设备解析 (屏幕阅读器、盲人阅读器)

浏览器爬虫

块级元素与行内元素

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset = "utf-8">
        <title>排版标签</title>
    </head>
    <body>
        <!-- 块级元素 -->
        <h1>一级标题</h1>
        <h2> </h2>
        <h3> </h3>
        <h4> </h4>
        <h5> </h5>
        <h6> </h6>
        <p> </p>
        <div> </div>
        
        <!-- 行内元素 -->
        <input>
        <span> </span>
    </body>
</html>

块级元素中能写：行内元素、块级元素
行内元素中能写：行内元素，但不能写块级元素
h1-h6 不能互相嵌套
p 标签中不能写块元素

文本标签

用于包裹：词汇、短语
通常写在排版标签中
通常都是行内元素

<!-- 常用文本标签 -->
<em>着重阅读的内容</em>
<strong>(语气比em更强)</strong>
<span>没有语义</span>

<!-- 不常用文本标签 -->
<cite>作品标题</cite>
<dfn>特殊术语</dfn>
<del>删除并文本</del>
<ins>插入文本</ins>
<sub></sub>
<sup></sup>
<code></code>
<abbr title="英雄联盟">LOL</abbr>
<i>本意是 人物思想活动，现多用于呈现字体图标</i>
<address>(块级元素)</address>

图片标签

行内元素

<img width="100" src="./image.jpg" alt="">

alt 属性作用：1. 有利于SEO；2. 方便设备解析 (屏幕阅读器、盲人阅读器)；3. 图片无法显示时

width 属性：1. 单位：px；2. 调整过程中比例不变 (一般不会同时调整宽和高)

./：当前位置；../：上一级

常见图片格式

jpg：有损的压缩格式

优点：1. 支持颜色丰富；2. 占用空间小

缺点：1. 不支持透明背景；2. 不支持动态图

png：无损的压缩格式

优点：1. 支持颜色丰富；2. 支持透明背景

缺点：1. 占用空间略大；2. 不支持动态图

bmp：不进行压缩

优点：1. 支持颜色丰富；2. 保留的细节更多

缺点：1. 占用空间极大；2. 不支持透明背景；3. 不支持动态图

gif：

优点：1. 支持动态图；2. 支持简单的透明背景

缺点：1. 仅支持256种颜色

webp：专门用来在网页中呈现图片

优点：具备上诉几种格式的优点

缺点：兼容性不太好

base64：把图片进行 base64编码，变成一串文本 (直接写在 img 标签的 src 里)

适用于一些较小的图片，或需要和网页一起加载的图片(不用请求了)

超链接

行内元素
可以包裹除 <a> 以外的一切标签

<!-- 打开网页 -->
<a href="" target="_self"></a> <!-- 默认 -->
<a href="" target="_blank"></a>

<!-- 跳转文件 -->
<a href="./movie.mp4">电影</a> <!-- 浏览器可以直接打开的文件 = 点击查看 -->
<a href="./ys.zip">压缩</a> <!-- 浏览器不可以直接打开的文件 = 下载 -->
<!-- 下载 -->
<a href="./movie.mp4" download="下载下来的文件名">电影</a>

<!-- 执行js脚本 -->
<a href="javascript:alert(6);">点我弹窗</a>

锚点

<a href="#here">跳转</a>
<a name="here"></a>
<a name="here"></a> <!-- 后写的失效 -->

<a href="#atm">跳转</a>
<p id="atm">    </p>

<a href="#">回到顶部</a>
<a href="">刷新页面</a>

唤起指定应用

<a herf="tel:10086">电话</a>
<a href="mailto:123@gmail.com">邮件</a>
<a herf="sms:10086">短信</a>

列表

有序列表 Ordered List

<ol>
    <li></li> <!-- list item -->
</ol>

无序列表 Unordered List

<ul>
    <li></li>
    
    <!-- 可以包裹其它内容 -->
    <li>
    	<ol>
    		<li> 
            	<span>hh</span>
            </li>
		</ol>
    </li>
</ul>

定义列表 Definition List

<dl>
    <dt>术语名称</dt> <!-- definition titile -->
    <dd>术语描述</dd> <!-- definition description -->
</dl>

表格

表格 table：

表格标题 caption；表格头部 thead；表格主体 tbody；表格脚注 tfoot

<table border="1">
    <caption>学生信息</caption>
  
    <thead> 
    	<tr> <!-- 行 -->
            <th>name</th> <!-- head -->
            <th>age</th>
        </tr>
    </thead>
    
    <tbody>
    	<tr>
        	<td>wxr</td> <!-- data -->
            <td>21</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
        	<td></td>
            <td>共计：1人</td>
        </tr>
    </tfoot>
</table>

常用属性

<table>：

<table border="1" width="500" height="500" cellspacing="0">
    
</table>

border：>1时，只能调整表格边缘边框
width：每一列的宽度自动分配
height：会调整表格主体的高度去满足设置的 height 值
cellspacing：单元格之间的间距 (上、下、左、右)

<thead>

<table border="1" width="500" height="500" cellspacing="0">
    <caption>学生信息</caption>
  
    <thead height="500" align="center" valign="middle"> <!-- 这里是真500，整个表>500 --> 
    	<tr> <!-- 行 -->
            <th>name</th> <!-- head -->
            <th>age</th>
        </tr>
    </thead>
</table>

align：水平方向对齐方式 (center left right)
valign：垂直方向对齐方式 (middle top bottom)

<tbody>

<table border="1" width="500" height="500" cellspacing="0">
    <caption>学生信息</caption>
  
    <thead height="50" align="center" valign="middle">
		....
    </thead>
    
    <tbody height="520" align="center" valign="middle">
        ...
    </tbody>
</table>

height：thead, tbody, tfoot 加起来不足设置的500时，会把高度补给 tbody，所以，设置的高度要大表格主体才会有变化

<tfoot> 同 <tbody>

<tr> <th> <td>

<table border="1" width="500" height="500" cellspacing="0">
    <caption>学生信息</caption>
  
    <thead height="50" align="center" valign="middle"> 
    	<tr height="50" align="center" valign="middle">
            <!-- 所在列全是50，所在行全是100 -->
            <th width="50" height="100" align="right" valign="bottom">name</th> <!-- 只有这一格会右下对齐 -->
            <th>age</th>
        </tr>
    </thead>
    
    <tbody height="520" align="center" valign="middle">
    	<tr>
        	<td>wxr</td>
            <td>21</td>
        </tr>
    </tbody>
    
    <tfoot height="50" align="center" valign="middle">
        <tr>
        	<td></td>
            <td>共计：1人</td>
        </tr>
    </tfoot>
</table>

跨行与跨列

<table border="1">
    <caption>学生信息</caption>
  
    <thead> 
    	<tr>
            <th colspan="2">1-1</th>
            <th>1-3</th>
        </tr>
    </thead>
    
    <tbody>
    	<tr rowspan="2">
        	<td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    	<tr>
        	<td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
        </tr>        
    </tbody>
</table>

其它标签

<br>：换行

<hr>：分割线 (有语义，只是想要一条水平线使用css)

<pre>：按原文显示

表单

网页中的交互区域

请求 -- 响应

<form action="https://www.baidu.com/s" target="_blank" method="post">
    <!--表单控件-->
    <input type="text" name="wd">
    <button>搜索</button>
</form>

action: 交给谁处理
name: 给数据取名字
method: 默认为 get

常用表单控件

文本输入框

账户：<input type="text" name="account" value="hututu" maxlength="10">

value: 输入框默认值

密码输入框

密码：<input type="password" name="pwd" value="123" maxlength="6"> <!--value不常用-->

单选框

性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女

name (键): 划分到一组，一组里只能选一个
value (值): 传给后端的数据
checked: 默认选中

多选框

爱好：
<input type="checkbox" name="hobby" value="sing" checked>唱歌
<input type="checkbox" name="hobby" value="dance" checked>跳舞

隐藏域

<input type="hidden" name="from" value="baidu">

确认按钮

<button type="submit">确认</button>
<input type="submit" value="确认">

button 默认 submit
value 是按钮中显式的值

重置按钮

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

普通按钮：不会引起表单提交和重置的按钮

<button type="button">检测账户是否被注册</button>
<input type="button" value="检测账户是否被注册">

文本域

其它：<textarea name="other" cols="30" rows="10"></textarea>

下拉框

籍贯：
<select name="place">
    <option value="gz">贵州</option>
    <option value="sd" selected>山东</option>
</select>

禁用表单控件

<input disabled type="text">

label标签

建立关联

<label for="zh">账户：</label>
<input id="zh" type="text" name="account" value="hututu" maxlength="10">

for 和 id 对应

<!--第二种方法-->
<label>
	密码：<input type="password" name="pwd" value="123" maxlength="6">
</label>

将表单内容进行分组，使得用户可以更清晰地理解各个部分的内容和关系

<form>
    <fieldset>
        <legend>主要信息</legend>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email"><br>
    </fieldset>

    <fieldset>
        <legend>地址信息</legend>
        <label for="street">街道:</label>
        <input type="text" id="street" name="street"><br>

        <label for="city">城市:</label>
        <input type="text" id="city" name="city"><br>
    </fieldset>

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

框架标签

嵌入

<iframe src="https://www.baidu.com" width="200" height="100" frameborder="0"></iframe>

<a href="https://www.toutiao.com" target="container">click</a>
<iframe name="container"></iframe>

<form action="https://so.toutiao.com/search" target="container"></form>
<iframe name="container"></iframe>

字符实体

 : 空格 ( )

<: <

>: >

&: &

©: ©

×: ✖

÷: ➗

meta元信息

网页基本信息

<!-- 针对IE浏览器的一个兼容性配置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对移动端的一个配置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!-- 配置网页的关键字 -->
<meta name="keywords" content="购物,家电">

<!-- 配置网页描述信息 -->
<meta name="description" content="这是一个购物网站">

<!-- 配置搜索引擎爬虫 -->
<meta name="robots" content="noindex">

<!-- 配置网页自动刷新 -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

<!---->
<meta name="author" content="wxr">
<meta name="generator" content="Visual Studio Code">

posted @ 2024-11-07 20:06 wajiez 阅读(23) 评论(0) 收藏举报

刷新页面返回顶部

wxrwajiez