html5基础

最新推荐文章于 2021-06-09 14:28:10 发布

Veilhry

最新推荐文章于 2021-06-09 14:28:10 发布

阅读量163

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_46439063/article/details/113773007

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html5基础

1. 浏览器内核

IE Trident
firefox Gecko
Safari webkit
chrome Blink 基于webkit
Opera blink
移动端主要是webkit

2. html标签分类

常规标签（双标签）

<标签名>内容</标签名> 比如 …

占主要结束标签带有“/”

空元素

<标签名 /> 比如
需要结尾，比较少

3. html模板标签

<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">

	<title>HELLO WORLD</title>

</head>

<body> 

</body>

</html>

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

页面语言类型

lang = “en” language类型 en为英文 zh-CN 中文位置写在在标签内部，主要告知浏览器页面语言类型，以便浏览器处理

字符集存储类型

UTF-8最常用另外还有

GB2312中文国标，包括6763个汉字

BIG5繁体中文 GBK则包含简体和繁体

utf-8支持全世界所有国家所需要的字符

若编码类型出错，解码出来则会乱码

lang主要主要在于原始网页内容的语言类型，而meta则是注重编码解码

4. 常用标签

<h1> </h1>标题标签有1-6级标题字号依次减小，字体变粗，一行一个标题

<p> </p>段落标签

<hr />水平线标签单标签

<br />换行标签类似敲下回车行彼此间距较小（break）

<div> </div> <span> </span>盒子布局标签

div一行一般只放一个div，而span一行可以放几个

4.1 文本格式化标签

<b></b> <strong> </strong>粗体文字（XHTML建议使用strong）

<i> </i> <em> </em> 斜体（XHTML建议em）

<s> </s> <del> </del>删除线（XHTML建议del）

<u> </u> <ins></ins>加下划线（XHTML不赞成使用u）

4.2 标签属性

<标签名属性1=“属性值1” 属性2 = “属性值2”.。。> 内容 </标签>

4.3 img图像标签

属性	属性值	描述
src	URL	图形的路径
alt	文本	图片不能正常显示的替换文本
title	文本	鼠标悬停时文本
width	像素	图像宽度
height	像素	图像高度
border	数字	设置图像边框宽度

4.5 链接标签

单词缩写： anchor 的缩写 [ˈæŋkə®] 锚点，铁锚

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

注意

外部链接需加上 http://
内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页 ,也可以使用id方式，跳转链接
暂时是空链接时，可以使用href="#" 占位代替

4.5.1 base标签

base 可以设置整体链接的打开状态
base 写到之间
把所有的连接都默认添加 target="_blank"

4.6 注释标签

    <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /

5. 路径

相对路径

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可，如<img src=“baidu.gif” />。
下一级路径	“/”	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如<img src=“images/baidu.gif” />。
上一级路径	“…/”	在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="…/baidu.gif" />。

绝对路径

完整的路径以及网络地址

注意

绝对路径使用\相对路径使用/

6. 特殊字符

在这里插入图片描述

7. 表格标签

7.1 创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

注意

一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签

中只能嵌套类的单元格
标签，他就像一个容器，可以容纳所有的元素

7.2 表格属性

属性	含义	常用值
boder	设置边框值0表示无边框	默认值 0 像素值
cellspacing	设置单元格与边框之间空白间隔	默认值 2 像素值
cellpadding	设置单元格内容与单元格边框之间的间距	默认值1 像素值
width	表格宽度	像素值
height	表格高度	像素值
align	设置对齐方式	left，center，right

在这里插入图片描述

7.3 表格头标签

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

th只是一种特殊的单元格，让自己里面的文字居中且加粗

7.4 表格标题

<table>
   <caption>我是表格标题</caption>
</table>

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。

7.5 合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

合并顺序

先上后下先左后右的顺序 ,找到目标单元格，确定跨行或跨列合并数，删除多余单元格

7.6 表格结构

表格分为三个部分：题头，正文，脚注——thead,tbody,tfoot

：用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签！
：用于定义表格的主体。放数据本体。
放表格的脚注之类。

8. 列表与表单

8.1有序与无序

有序列表ol

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

有序列表有序号

注意

在 ol中只能嵌套li，直接在ol标签中输入其他标签或者文字的做法是不被允许的
li相当于是一个容器

无序列表

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

8.2 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

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

8.3 表单标签

组成

表单控件：包含具体的表单功能，如文本输入，密码框，复选框，提示按钮，重置按钮

提示信息

对于表单内容的提示性信息

表单域

相当于一个容器，包含有表单的所有内容，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法

8.3.1 input控件

<input type="属性值" value="你好">

常用属性
在这里插入图片描述

name属性：表单的区别属性，自定义，radio同组应有相同的名字

8.3.2 label标签

当点击label标签时，所绑定的表单自动获得输入焦点

绑定方式

直接绑定

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

for与name结合

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

8.3.3 文本域

<textarea >
  文本内容
</textarea>

8.3.4 select下拉列表

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意 select中至少包含一个option当其中一个option 中selected = ”selected“ 默认选中当前选项

8.4 form表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

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

常用属性

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

黑马前端全栈教程

Veilhry

关注

0
点赞
踩
2

收藏

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

html5基础1. 浏览器内核IE Tridentfirefox GeckoSafari webkitchrome Blink 基于webkitOpera blink移动端主要是webkit2. html标签分类常规标签（双标签）<标签名>内容</标签名> 比如 …占主要结束标签带有“/”空元素<标签名 /> 比如需要结尾，比较少3. html模板标签<!DOCTYPE html><
复制链接

扫一扫