html使用

最新推荐文章于 2023-05-24 14:49:31 发布

GET_HOSE_UPtrack

最新推荐文章于 2023-05-24 14:49:31 发布

阅读量313

点赞数 1

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.csdn.net/GET_HOSE_UPtrack/article/details/126104982

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML

标签用于声明文档类型告诉浏览器用那种html版本来显示网页

<!DOCTYPE html>

lang标签代表网站的语言

en	英文网站
zh-CN	中文网站

<html lang="zh-CN">

标签

标签属性	属性值	作用
charset	UTF-8 /GB2312/…	设置字符编码
http-equiv	X-UA-Compatible
content	IE=edge
name	viewport
content	width=device-width, initial-scale=1.0

html常用标签

标题标签
…
：作为标题使用，并且依据重要性递减 一个标题独占一行 加了标题的文字会变粗字号也会依次变大

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

段落标签
:用于定义段落
换行标签

文本格式化标签

语义	标签	说明
加粗	或	更推荐,语义更强烈
倾斜	或	更推荐,语义更强烈
下划线	或< u>	更推荐,语义更强烈
删除	或< s>	更推荐~~,语义更强烈~~

没有语义的标签

div: **块级元素** <u>在浏览器中占据整行，并排斥其它元素与其位于同一行</u>
span: **行内元素** <u>在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示</u>

图像标签

属性	属性值	作用
src	图像的地址	引入图片的地址
alt	图像无法现实时用于显示的文字	图像的替换文本
title	文本	鼠标移动到图像上时现时的文字
相对路径上一级路径 …/

超链接标签

1.从一个网页或位置跳转到另一个位置

属性	属性值	作用
href	链接目标的url地址	找到链接跳转地址
target	链接页面的打开方式默认 _self /_blank	self当前页面打开 blank新窗口打开

<h4>外部链接 新窗口打开</h4>
<a href="http://www.baidu.com" target="_blank">百度</a>
<h4>内部链接(网站内部页面之间跳转)</h4>
<a href="index.html">百度</a>
<h4>下载链接</h4>
<a href="链接的地址为文件 ，压缩包等">百度</a>
<h4>网页元素的链接</h4>
 <a href="http://www.baidu.com"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.1ChedSsZH_Uw30w2BhWAmQHaHa?pid=ImgDet&rs=1"/> </a>
 <h4>锚点链接（跳转到本页面内的某个位置）</h4>
<a href="#页面内元素的id名称">***</a>

注释标签

被注释的文字不会在网页内显示

<--! 被注释的文字   -->

表格标签

表格标签属性

属性	值	作用
align	center / left / right	表格相对周围元素的对齐方式
border	1 / “”	表格的边框
cellpadding	1/""默认为1	单元格边框到文本的边框
cellspacing	1/""默认为2	单元格与单元格间的zh距离
width / hight	像数值或百分比	表格的宽或者高

 <table> 
 <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

结构化表格

标签	语义
thead	表格头部
tbody	表格主体部分

 <table align="center" width="600" height="400" border="1" cellspacing="0" style="text-align:center;">
        <thead>
            <tr>
                <th>表格头部</th>
                <th>表格头部</th>
                <th>表格头部</th>
                <th>表格头部</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表格主体</td>
                <td>表格主体</td>
                <td>表格主体</td>
                <td>表格主体</td>
            </tr>
            <tr>
                <td>表格主体</td>
                <td>表格主体</td>
                <td>表格主体</td>
                <td>表格主体</td>
            </tr>
            <tr>
                <td>表格主体</td>
                <td>表格主体</td>
                <td>表格主体</td>
                <td>表格主体</td>
            </tr>
        </tbody>
    </table>

合并单元格：

合并单元格的方式	属性	属性值	作用
跨行合并	rowspan	合并单元格的个数	竖直方向上的合并单元格
跨列合并	colspan	合并单元格的个数	水平方向上的合并单元格

合并单元格的步骤

确定跨行还是跨列
找到目标单元格写合并方式 跨行：合并的最上侧为目标单元格跨列：合并的最左侧单元格为目标单元格
删除合并后多余的单元格

列表标签

无序列表

<ul>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
    </ul>

ul标签内只能放li

有序列表

<ol>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
    </ol>

自定义列表

标签名	标签作用
dl	定义描述列表
dt	定义项目或名字
dd	描述每一个项目或名字

<dl>
        <dt>名词</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
        <dd>名词解释3</dd>
    </dl>

表单域

表单域是一个包含表单元素的区域，已实现用户信息的收集和传递
表单属性：

属性	属性值	作用
action	url地址	用于指定接受表单数据的服务器程序的url地址
method	get / post	用于设置表单数据的提交方式，其常用值为get / post
name	名称	用于指定表单的名称，以区分同一个页面的多个表单域

<form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
</form>

表单控件（表单元素）

input标签用于收集用户信息

        <input type="属性值" />

type属性：

属性	属性值	作用
type	button	定义可点击按钮
	checkbox	定义复选框
	file	定义输入字段和浏览按钮，供文件上传
	hidden	定义隐藏的输入字段
	image	定义图像形式的提交按钮
	password	定义密码字段，该字段中的字符被掩码
	radio	定义单选按钮
	reset	定义重置按钮，重置按钮会清除表单中的所有元素
	submit	定义提交按钮，提交按钮会把表单中的数据发送到服务器
	text	定义单行的输入字段。默认宽度为20个字符

除type外input标签的其他属性

属性	属性值	作用
name	由用户自定义	定义input元素的名字
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中最大的字符长度

label标签：用于绑定一个表单元素当点击lable标签的文本时浏览器会自动将光标转到或选择对应的表单元素上

 <form action="#" method="get" name="sex">
        <label for="userName">用户名：</label>
        <input type="text" id="userName">
        <br />
        <label for="sex">男</label>
        <input type="radio" id="sex"  name="sex"/>
    </form>

select下拉表单元素

 <form action="#" method="get" name="sex">
       籍贯：
       <select>
        <option value="">山东</option>
        <option selected value="">兰州</option>
        <!-- selected 或selected="selected"为默认选中项 -->
        <option value="">定西</option>
       </select>
    </form>

textarea标签定义多行文本输入的控件

属性名	属性值	作用
cols	正整数	每行中的字符数
rows	正整数	显示的行数

在实际开发中使用css来控制，不使用clos和 rows。

<form action="#" method="get" name="sex">
        <label for="every">意见</label>
        <textarea name="yijian" id="every" cols="30" rows="10"></textarea>
     </form>