HTML基础

最新推荐文章于 2024-07-21 17:23:08 发布

花未眠0619

最新推荐文章于 2024-07-21 17:23:08 发布

阅读量212

点赞数 2

分类专栏： HTML 文章标签： html web

本文链接：https://blog.csdn.net/xyn320382/article/details/108135921

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础知识

HTML：超文本标记语言，是一种使用结构化Web网页（标准制定者：W3C）及其内容的标记语言。
发展过程：XHTML5，HTML5，XHTML1.0,HTML4.01，HTML3.2
HTML5特性：
兼容性，效率，安全性
实用性：新增元素都是对现有网页和用户习惯进行跟踪、分析和概括出来的
分离：将结构和样式完全分离，提高复用率
简化，通用性，无插件
C/S架构软件（C：客户端，S：服务器）
客户端：用户提供客户端来使用软件
　　　　服务器用来处理软件的业务逻辑
特点：必须安装之后才能使用
　　　　软件更新时，服务器和客户端都需要更新
　　　　软件无法跨平台使用
　　　　软件客户端和服务器间的通信采用自有协议，安全性好
B/S架构软件（B：浏览器，S：服务器）
特点：网站，利用网站使用软件
　　不需要安装便可使用
　　　软件更新，客户端不需要更新
　　　软件可以跨平台使用
　　　客户端和服务器间采用HTTP通信协议，安全性差
HTML规范写法：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<title>网页标题</title>
　　<stype>CSS样式</stype>
</head>
<body>
　　<!--网页内容，可以使文本、图片等-->
</body>
</html>

具体解释：
html：根标签，表示整个网页。包含两个属性head,lang="en"英文，		lang="zh"中文
head：文档头部，描述文档的各种信息和属性，
	包括网页标题----此处内容不会	显示在网页上，用户看不见，给浏览器看
meta：作用：提供网页相关的元信息，设置描述信息，关键字，重定向（用户搜索关键字，便可找到该网页）

<meta name="keywords/description" content="具体内容，逗号隔开”>
<meta http-equiv="refresh" content="3;url=http://www.">三秒刷新页面

字符集：定义当前文件使用的字库
	作用：编码和解码采用的规则，出现乱码的原因：编码和解码采用的字符集不同。
常见的字符集（charset）：
UTF-8：国际标准字库
ASCII
GBK/gb2312：中国字库，国家标准

注释：为代码添加适当注释，仅在编辑文本情况下可见，在浏览器页面不会显示
	语法：<!--注释-->
DOCTYPE作用：
DOCTYPE声明在文档最前面，告诉浏览器以何种方式渲染页面，包含二种模式：严格模式、混杂模式。
		严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
		混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容。

HTML属性和值：
**属性：**用于修饰元素，必须位于开始标签里，一个元素的属性不止一个，多个属性用空格隔开
**每个属性都有值：**属性和属性的值之间用等号链接；属性的值包含在引号当中；属性总是以名称/值对的形式出现。
<header>网页头部
<hgroup>一个标题组
<main>网页主体
<article>网页中的一块内容
<footer>网页底部
<section>一个区块
<nav>导航
<aside>辅助信息
以上均为块元素，独占一行。
<q>短引用
<blockquote>长引用
标题与段落
标题：h1-h6等级（从小到大），默认加粗，具有换行符，不能嵌套
　　 h1+h2+h3：并行显示
　　 h1>h2>h3：嵌套显示
　　h1{标题}*10+tab键=创建10个<h1>标题</h1>
　　h1{$}*10+tab键=1,2,3…10个标签
段落：<p>…</p>
字符实体
有些东西在浏览器中打不开，需要使用字符实体
&nbsp；空格
&emsp; 全角空格
© 版权符合
¥ 人民币符号￥
> 大于号>
< 小于号<
快捷符号
+：标签并行关系
：创建多个标签，div5+tap
{}:设置内容
（）：对内部的内容，（tr>td*4）*5
[]:设置属性，div[id=demo class]
@:设置$符号的起始位置
$KaTeX parse error: Expected '}', got 'EOF' at end of input: :设置起始位置，div{$ @4}*5+tap键=4,5,6,7,8
文本修饰标签
强调：<strong> </strong>(加粗)
　　　<em> </em>(斜体)
<i> </i>：斜体；<b> </b>：加粗
区别：1.写法和展示效果有区别，一个加粗，一个斜体
　　　2.strong的强调性更强，em稍弱
上标/下标：<sup>上标 </sup> <sub>下标 </sub>
删除文本，插入文本：<del> </del>/<ins> </ins>
　　两者配合使用
图片标签和属性
<img src=“引入图片地址” alt=“当图片加载失败时，显示的提示文字” title=“ 提示文字（鼠标放在图片上出现的提示）”>
<img>标签设置高度height，宽度width
图片格式：
　　　　jpg(jpeg):支持的颜色丰富，不支持透明效果，适合显示图片
　　　　GIF：支持的颜色较少，支持简单透明，支持动图
　　　　png:支持颜色丰富，支持复杂透明
　　　　webp:google专门为页面设计一种图片格式，支持颜色丰富、支持复杂透明、支持动图，并且占用内存特别小，集各种优点，兼容性差
　　　　通过base64编码的图片（背景图片必须快速出现），base64可以将图片转换成字符串，直接在网页中使用。
注意：效果一致，用小的；效果不一致，用效果好的；
音频标签
<aduio controls autoplay src=’ '> </aduio>
controls:用来设置用户是否控制音频播放；没有属性值，允许用户播放就加（有音频），不允许就不加（无音频）
autoplay：设置音乐是否自动播放，默认不会

<aduio controls autoplay loop(循环播放）>  
　　　　对不起，浏览器不支持此标签
　　　　<source src='#'>
　　 </aduio>

视频标签
<video controls src=’#’ width=’ '> </video>
<embed>标签：定义嵌入插件，以便播放多媒体信息。

<embed width=' 'height=' 'src=' 'type='video/mp4'>  </embed>

<object data="#" width=' 'height=' 'type='video/mp4'>  </object>

object功能强大，用于替代img
15. 超链接
用于引入文件的地址路径，相对路径，绝对路径，
用 # 号来创建固定链接

<a href=' # '>  </a>

target:改变链接的打开方式
　　　　_self：在当前页面打开
　　　　_blank：新窗口打开（慎用）
　　 <base target=’_blank’>:改变标签的默认行为
16. 锚点
给标签设置name或id属性，通过<a href=’#’>链接锚地am，链接到当前页面中的指定位置，或其他页面的指定位置。

例：当前页面内锚点：
　　　　<h1 id='top'>顶部</h1>
　　　　<a href='#top’>返回顶部</a>
　　其他页面：
　　　　跳转<a href='./地址#middle'>进入另一个页面的中间位置\</a>
　　　　中间位置设置锚点：<p  id=‘middle’>

列表
无序列表：<ul> </ul>，无先后之分；列表项：<li> </li>
ul/li必须同时出现，不能单独书写。嵌套一个/多个li，ul只能放li标签，并不能放其他内容
li：type属性修改：disc:默认实心圆；
　　　　　　　　circle:空心圆；
　　　　　　　　square:实心方块；
有序列表：<ol> </ol> <li> </li>
li：type属性设置项目符号
　　　　　　　　A大写英文字母
　　　　　　　　a小写英文字母
　　　　　　　　1阿拉伯数字
　　　　　　　　I大写罗马数字
　　　　　　　　i小写罗马数字
　　start：设置列表符号从第几个开始排列，属性值只能是阿拉伯数字
　　reversed：设置列表符号的倒序，会会出现负号。

<ol type=’A’start=’3’reversed>
　　<li>
　　　　ddwws
　　</li>
</ol>

定义列表
给文本添加定义列表语义
dl:定义列表只能嵌套（一个、多个）dd/dt，两者为同一级标签，dd是dt的解释、定义、说明
dt:定义标题容器级　　
dd:定义描述容器级，跟在dt后面，解释dt

<dl>
<dt>速度</dt>
<dd>速度就是路程除以时间</dd>
</dl>

表格
表格基础：三层嵌套关系table>tr>th|td
table:定义表格容器
tr：定义行
th：定义表头
td：定义单元格，最简单的表格要求每一行单元格个数相同
属性：
border：设置表格的边框，外边框的宽度
borde-rcolor：设置边框的颜色
height,weight：设置高宽度
align：设置表格的对齐方式center,left,right
cellspacing：设置边框与边框之间的距离
cellpadding：设置内容与边框之间的距离
background：设置表格的背景图片
bgcolor：设置表格的背景颜色
Summary：表格隐藏信息，用于提高SEO
th/td/tr标签
table>tr>td(th)
tr：行语义，align:设置当前单元格中文本的水平对齐方式left,center,right
bgcolor,background：设置背景颜色或背景图片
td（th）：单元格语义，th文本具有默认加粗，居中的效果，容器嵌套任何东西
bgcolor,background：设置背景颜色和背景图片
colspan：列合并，左右合并，横 rowspan：行合并，上下合并，纵
border-collapse：collapse;设置边框的合并
表格标题：caption;只有一个表题
表头：thead
主体部分：tbody
底部：tfoot

<table>
<caption>.....</caption>
<thead>
(tr>td*5)*2+tab键
</thead>
<tbody>
(tr>td*5)*5+tab键
</tbody>
</table>

tr：first-child{设置第一行}
tr：nth-child(2n){设置奇、偶行进行操作}
创建表格时，如果没有使用tbody，浏览器会自动添加tbody，并且将所有的tr都添加到tbody中，所以tr的父元素并不是table而是tbody。
表单
form表单：用来收集用户数据，并提交到对应的地址。
功能性标签，不是结构性
name：表单的名称
action：设置表单提交的地址 method:设置数据提交的方式（GET,POST）
target：页面打开方式（_self,_blank,_parent,_top,framename）
表单中的控件：textarea文本域，select下拉列表，input输入框，button按钮
textarea与label标签:多行文本域、多行文本输入框
rows设置行高，数字
cols设置列宽，数字----代表字节
label表单控件（label input）定义标注
for规定label绑定到哪个表单控件

一种方法：
<form action=’./create’ method=’get’ target=’_blank’>
<label for=’description’>     </label>
<textarea name=’’ id=’description’ cols=’’ rows=’’>  </textarea>
</form>

另一种：将表单控件写在label元素内，实现联动
<form action=’./create’ method=’get’ target=’_blank’>
<label for=’description’>---------不需要加id，此处去除
<textarea name=’’ id=’description’ cols=’’ rows=’’>  </textarea>
</label>
</form>

Select标签
Select创建单选或多选菜单
multiple：设置多选
size设置显示在页面上的列表项数
Option用来定义下拉列表中的一个选项，属性：selected设置默认被选中的列表项（布尔型）
注意：内容只能是文本，不能出现标签
Optgroup定义选项组： labeltext为选项组规定描述

<form action="">
    <label for="email" >邮箱</label>
    <select name="" id="email" multiple size="5">
       <optgroup label="非弹出选项">
           <option value="">@123.com</option>
           <option value="">@345.com</option>
           <option value="">@876.com</option>
           <option value="">@890.com</option>
           <option value="">@567.com</option>
       </optgroup>
        <optgroup label="弹出选项">
            <option >支付宝</option>
            <option value="">qq</option>
            <option value="">淘宝</option>
            <option value="">微信</option>
        </optgroup>
    </select>
</form>

button定义按钮
type规定按钮类型（button reset submit）
input输入语义单标签，搜集用户信息
type属性：
text单行文本框，文本输入框（默认类型）
pattern规定输入字段的值的模式或格式，错误输入会提示
Pattern=’[0-9]{2,5}’：数字0-9,2-5位
Password密码输入框
radio单选框单选框要统一设置name属性，value设置不同值，label标签说明
checkbox复选框
input：password+tab键===<input type=’password’>
input：radio+tab键===<input type=’radio’>
radio单选框

例：设置一个性别选项
<label>性别</label>
<label for=’man’>男</label>
<input type=’radio’ id=’man’ value=’男’ name=’sex’>
<label for=’woman’>女</label>
<input type=’radio’ id=’woman’ value=’女’ name=’sex’> 
Checkbox多选框
<label>兴趣爱好</label>
<label for=’1’>足球</label>
<input type=’checkbox’ id=’1’ value=’足球’ name=’intrest’>
<label for=’2’>篮球</label>
<input type=’checkbox’ id=’2’ value=’篮球’ name=’intrest’>

image图片
<input type=’image’ src=’地址’ weight=’’ height=’’>
file文本域
<label>选择图片
<input type=’file’>
hidden隐藏文本
<input type=“hidden” name=“color” value=“red”>
用户看不见，后端可见
button普通按钮
<input type=“button” value=“普通按钮”>没有任何功能
submit提交按钮
<input type=“submit” value=“提交”>
reset重置按钮
<input type=“reset” value=“重置按钮”>按下系统数据重置
button标签之间所有内容都是按钮的内容，比如文本或者多媒体内容
三种类型：button,submit,reset
<button>按钮</button>：默认submit提交按钮
<button type=”button”>普通按钮</button>
button与input设置标签区别
设置内容不一样：button在标签之间设置内容，input在value属性中设置内容
button内容可以包含其他标签，input不能渲染其他标签
表单控件通用属性
<value:定义送往服务器的选项值(后)
<name:定义文本区的名称(前)
<autofocus:自动获取焦点：打开一个页面，光标自动出现在某一地方
<placeholder=“”:未输入任何值时显示的内容
<disabled:该文本域是禁用的，变成灰色，不能使用
<readonly:该文本域是只读的
<maxlength/minlength:规定最大/小字符数（textarea、input）
<required:文本区域必填（textarea、input）

<textarea autofocus name="trod" value="134" id="intro" placeholder="请输入" maxlength="3" ></textarea>

废弃标签：b加粗,i斜体字,u下划线,s删除线
其他标签：pre:预格式化原样输出
strong:强调，加粗 em:强调，斜体字 br:换行（单）
code:单行代码 ins:下划线 hr:分割线（单）
del:删除线 abbr:定义缩写
address:定义地址 iframe:内联框架
iframe:内联框架，引用外部资源（外部网页），开发中不建议使用，中间内容不会被搜索引擎抓住
<iframe src=”www.baidu.com” frameborder=”0”>
31.placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。
<input type=“text” placeholder=“猫咪图片地址”>
给表单添加一个必填字段
在input元素中加上required属性就可以了，例如：<input type=“text” required>
创建一组单选按钮
单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label（标签）元素中。所有关联的单选按钮应该拥有相同的name属性。
创建一组复选框
checkboxes（复选框）就好比多项选择题，正确答案有多个。复选框是input输入框的另一种类型。每一个复选框都应该嵌套在它自己的label（标签）元素中。所有关联的复选框应该拥有相同的name属性。
注：通过添加checked属性，设置某个单选按钮或多选按钮被默认选中。
<input type=“radio” name=“test-name” checked>

花未眠0619

关注

2
点赞
踩
0

收藏

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

HTML基础知识HTML：超文本标记语言，是一种使用结构化Web网页（标准制定者：W3C）及其内容的标记语言。发展过程：XHTML5，HTML5，XHTML1.0,HTML4.01，HTML3.2HTML5特性：兼容性，效率，安全性实用性：新增元素都是对现有网页和用户习惯进行跟踪、分析和概括出来的分离：将结构和样式完全分离，提高复用率简化，通用性，无插件C/S架构软件（C：客户端，S：服务器）客户端：用户提供客户端来使用软件　　　　服务器用来处理软件的业务逻辑特点：　必须安装之后才能
复制链接

扫一扫