HTML5 基本标签--前端如此简单

最新推荐文章于 2024-07-24 10:40:52 发布

coding-贾

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量926

点赞数 1

文章标签：开发语言前端

本文链接：https://blog.csdn.net/weixin_45447134/article/details/121659171

版权

在这里插入图片描述

HTML5

1.概念：是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言
- 超文本:
 - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
 - 标记语言:
 - 由标签构成的语言。<标签名称> 如 html，xml
 - 标记语言不是编程语言

2.快速入门

语法要求：
1. html文档后缀名 .html 或者 .htm
2. 标签分类
 - 标签种类：
 - 双标签：有开始标签和结束标签。如<html> </html>
 - 自闭和标签：开始标签和结束标签在一起。如 
 - 标签之间的关系：
 - 嵌套关系、并列关系
3. 标签可以嵌套：
 需要正确嵌套，不能你中有我，我中有你
 错误：<a></a>
 正确：<a></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
```
<img src="../images/icon.png"/>
```
5. html的标签不区分大小写，但是建议使用小写。

3.HTML5基本结构

 <!DOCTYPE html>
 <html >
    <head lang="en">
      <meta charset="utf-8">
      <title>网页标题</title>
    </head>
    <body>
      网页正文
    </body>
 </html>

<!DOCTYPE html> 声明文档类型为 html5文档

<meta charset="utf-8">规定整个网页的编码格式是“UTF-8”

lang="en"用来定义当前文档显示的语言。
en定义语言为英语 zh-CN定义语言为中文

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文;这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。

4.基础标签（一）

4.1基础标签

基础标签	代码
标题标签：	`<h1></h1>...<h6></h6>`
段落标签：	`<p></p>`
换行标签：	`<br/>`
水平线标签：	`<hr/>`
文字加粗：	`<strong></strong>或<B></B>`
倾斜：	`<em></em>或<I></I>`
无语义标签:	`<div></div>` 大盒子，占一行 `<span></span>` 小盒子，可以一行放多个

4.2HTML5的结构元素

语义化标签代码	语义
`<header></header>`	标题头部区域的内容（用于页面或页面中的一块区域）
`<footer></footer>`	标记脚部区域的内容（用于整个页面或页面的一块区域）
`<section></section>`	Web页面中的一块独立区域
`<article></article>`	独立的文章内容
`<aside></aside>`	相关内容或应用（常用于侧边栏）
`<nav></nav>`	导航类辅助内容

4.3`<iframe> 内联框架`

内联框架属性（实现页面间的相互跳转）
- 在被打开的框架上加name属性
- 在超链接上设置target目标窗口属性为希望显示的框架窗口名

<iframe src="path" name="mainFrame" ></iframe> 

<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>

src="path"引用页面地址 name="mainFrame" 框架标识名

5.特殊符号

空格	` `
大于号(>)	`>`
小于号(<)	`<`
引号(")	`"`
版权符号@	`©`

6.基础标签（二）

6.1 图像标签

<img src="路径" alt="替换文字"  title="鼠标悬停提示文字" width="宽度" height="高度"/>

图像路径：

一）相对路径

 ① 图像位于网页的同一级    直接写图像全名
    <img src="image.png"/>

 ② 图像位于网页的上一级    ../+图像全名
    <img src="../image.png"/>
    
 ③图像位于网页的下一级    文件名+图像全名
    <img src="images/image.png"/>

    ` ../ 表示路径返回上一级 `

    `/   表示路径分隔符	`

二）绝对路径(一般不用)

     带盘符<img src="d:/xxx/image.png"/>

6.2 超级链接

 <a href="路径" target="_self或者_blank">显示的文字</a>

target 超链接的打开方式: _self 当前网页 _blank 空白网页

常见的超链接应用

        文字链接
           <a href="路径">文字链接</a>

        图像链接
           <a href="路径"><img src="路径"/></a>


        锚链接
            ①命名锚记
              <a name="mark"></a>

            ②添加锚链接
              <a href="#mark">点击跳转</a>

        邮箱链接
            <a href="mailto:1748821593@qq.com">点击发送邮件</a>

        空链接
            <a href="#">点击不跳转</a>

6.3 列表

①无序列表–自带实心圆符号

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

在 <ul></ul>上加 type 属性:

`<ul type="circle、disc、square"></ul>`        ( circle： 空心圆   disc : 实心圆   square:实心方框)

②有序列表–自带数字符号

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

<ol type="1、A、a、I、i"></ol> (数字、大写字母、小写字母、大写罗马字、小写罗马字)

③自定义列表

<dl>
	    <dt>标题1</dt>
	    <dd>解释标题1</dd>
	    <dd>解释标题1</dd>
    
    	<dt>标题2</dt>
	    <dd>解释标题2</dd>
	    <dd>解释标题2</dd>
</dl>

6.4 表格–多用于显示数据

 <table>
     <tr>
         <th></th>
         <th></th>
     </tr>
     <tr>
         <td></td>
         <td></td>
     </tr>
 </table>

table 标签：声明表格 tr标签：声明行 th标签：表头单元格（加粗居中） td标签：普通单元格

属性	属性代码
表格的属性：`<table 这里加属性 ></table>`	`宽度:width=""` `填充:cellpadding=""` `间距:cellspacing=""` `水平对齐:align="left、center、right"` 左，中，右 `边框:border=""`
单元格的属性： `<tr 这里加属性管一行></tr>` `<td 这里加管一个单元格></td>`	`宽： width=""` `高： height=""` `水平对齐：align="left、center、right"` 左，中，右 `垂直对齐：valign="top、middle、bottom"` 顶，中，底 `背景颜色：bgcolor=""`
合并单元格：	`跨列合并 colspan="数值：代表合并的单元格个数"` `跨行合并 rowspan="数值：代表合并的单元格个数"` `注意：合并完之后删除多余的单元格标签`

6.5 表单–用户向后台服务器提交数据用的

<form action="提交到的位置（空着）" method="post/get">
    用户名：<input type="text" name="user" value="">
    密 码：<input type="password" name="pwd" value="">
    
    <input type="submit" value="提交">
 </form>

method:提交方式 post比get更安全
type:类型 text：文本 password:密码框 submit:提交

name:标签名（必须写） value: 用户输入值（必须写）

单选按钮：

<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女

radio:按钮 checked：被选中

复选框：

   <input type="checkbox" name="love" value="0">编程
   <input type="checkbox" name="love" value="1" checked>设计

checkbox 复选框

注意：单选按钮和复选框的 name 值必须一样。

下拉列表：

<select name="year">
    <option value="2000">2000</option>
    <option value="2001"  selected>2001</option>
    <option value="2002">2002</option>
</select>

select：选择 option ：列表项 selected：被选中

四大按钮：

<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
<input type="image" src="路径" >

submit:提交 reset:重置 button:按钮 image:图像

多行文本域：

<textarea name="info"  cols="30" rows="10">请输入个人简介</textarea>

cols：列 rows:行

文件域：

<input type="file" name="" >

file:文件
注意：在 form 标签添加属性（enctype=“multipart/form-data”）表单编码属性

隐藏域：

<input type="hidden" name="h" value="">

hidden:隐藏

只读属性： readonly=“readonly”
禁用属性： disabled=“disabled”

表单元素的标注：
①label for id 组合 ;要保证 for 的值与 id 的值相同

<label for="manId">男</label>
<input type="radio" name="man" id="manId"/>

 ②label 括起来

<label>
	<input type="radio" name="man" id="manId"/>男
</label>

表单初级检验：

提示信息：<input type="text" name="sousuo"  placeholder="请输入要搜索的关键字"/>
                        
必须输入：<input type="text" name="user"  required/>
                       
正则表达式：<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

placeholer:输入提示信息 required:必须输入 pattern:正则表达式表达式参考网络资源。

H5新增:

邮箱:<input type="email"  name="email"/>

type="email" 邮箱 type="url" 网址 type="number" 数字 type="range" 滑块 type="search" 搜索

6.6多媒体元素

视频元素 video

<video controls>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
</video>

视频格式\浏览器	IE	Firefox	Opera	Chrome	Safari
Ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG4	9.0+	不支持	不支持	5.0+	3.0+
WebM	不支持	4.0+	10.6+	6.0+	不支持

controls 提供播放、暂停和音量的控件 autoplay 自动播放属性

音频元素 audio

<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
    你的浏览器不支持audio元素
</audio>

音频格式\浏览器	IE	Firefox	Opera	Chrome	Safari
Ogg	不支持	3.5+	10.5+	3.0+	不支持
MP3	9.0+	不支持	不支持	3.0+	3.0+
WAV	不支持	4.0+	10.6+	不支持	3.0+

7.很溜的操作

sublime 快捷键：

 Alt+shift + 数字（1、2、3、4、5、8、9）：分屏
 Tab: 缩进   
 shift+Tab： 反缩进
 ctrl+/：  添加注释    
 ctrl+shift+/： 取消注释
 alt+. :   快速补全   
 ctrl+alt+ ↑/ctrl+alt+↓：向上/向下选中多行 
 ctrl+鼠标左键：选中多行   
 ctrl+H：替换

Emmet（艾米特）插件：

各大编辑器都集成了的代码简写插件。(tab激活)
     1：html初始结构     举例：！=> Tab
     2：id（#）,class（.）
     3.子节点（>），兄弟节点（+），上级节点（^）
     4：重复（*） 
     5：分组（()）
     6：属性（ [属性=”属性值”]）    "[]"包含除id、class的其他属性
     7：编号（$）
    		 一个$ 代表一位数，$$就是两位数了,以此类推就可以形成$(1),$$(01),$$$(001)
             从几开始递增（@）   $@n :如果想自定义从几开始递增的话就利用：$@+数字*数字
             要生成递减的：@-    $@-  
             逆序生成到某个数：@-   $@-n*m
     8：文本（{}） 
     9.隐式标签
             这个标签没有指令，而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。
     		.test   <div class="test"></div> 
CSS:
	比如 w200 按tab 可以 生成 width: 200px;
	比如 lh26px 按tab 可以生成 line-height: 26px;

编写不易转载需注明出处： https://editor.csdn.net/md?not_checkout=1&articleId=121659171

coding-贾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 基本标签--前端如此简单

HTML5 基本标签–[前端如此简单]文章目录HTML51.概念：是最基础的网页开发语言Hyper Text Markup Language 超文本标记语言2.快速入门语法要求：3.HTML5基本结构4.基础标签（一）4.1基础标签4.2HTML5的结构元素4.3` 内联框架`5.特殊符号6.基础标签（二）6.1 图像标签6.2 超级链接6.3 列表6.4 表格--多用于显示数据6.5 表单--用户向后台服务器提交数据用的6.6多媒体元素7.很溜的操作sublime 快捷键：Emmet（艾米特）插件：.
复制链接

扫一扫