HTML

最新推荐文章于 2024-06-13 10:03:01 发布

Kerwin_YF

最新推荐文章于 2024-06-13 10:03:01 发布

阅读量475

点赞数

本文链接：https://blog.csdn.net/Kerwin_YF/article/details/104666382

版权

一、前端内容介绍

网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript

HTML
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
HTML是一种语言，搭建网页的骨架，可以认识渲染的标记（标签），只支持黑白
CSS
全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
CSS修饰网页（加颜色）样式，让网页变得更漂亮
JavaScript
JavaScript是一门脚本语言
JavaScript：使网页发生行为，让网页动起来（例如点击链接）
jquery库：write less do more
bootstrap：前端框架，整合了HTML+CSS+JS

二、HTML

2. HTML简介

2.1 HTML发展历史

1993.6——超文本标记语言第一版
1995.11——HTML2.0
1997.1.14——HTML3.2，W3C（万维网联盟）推荐此版本
1999.12.24——HTML4.0.1（微小更改）
2000.5——HTML4.0.1严格版正式发布
2014.10.28——HTML5诞生，W3C推荐此版本

2.2 超文本标记语言

超文本——网页上的音频、视频、超链接
标记——用HTML语言将文本包裹起来叫标记，例如：< a>新闻<\a>有开始标记和结束标记

2.3 安装sublimetext

网址：http://www.sublimetext.com/

2.4 HTML的常用标签介绍和文档结构

①常用标签

有双闭合标签与单闭合标签（br）

标题标签：h1-h6
段落标签：p
strong/em：strong对文本内容强调标签（例如加粗效果），em对文内内容修饰的标签（例如斜体）
hr/br：hr文章与文章之间的分割线，br是文本与文本之间换行
ul/ol/dl：列表
li：列表
div/span：网站排版布局进行划分的标签
table：表格信息
a：超链接
img：图片
form：与服务器进行交互
input：输入框
textarea：多行文本输入框
select：下拉列表

文本级标签

p、h1-h6、strong/em、span、a、img

排版级标签

br/hr、div、ul/ol/dl、li、input、table、select、option、form

②文本结构

<!DOCTYPE html>		#文档声明头，表示该页面使用哪个HTML版本进行编译，表示该文档是HTML5文档
<html lang="en">	#最外层的标签，它表示网页内容的开始，语言language=English
<head>	#表示网站头部声明,不会显示到网页内容中
	<meta charset="UTF-8">
	<title>网站的标题</title>
</head>
<body>	#网页的内容标签，body标签包含网页中所有的可见元素
	

</body>
</html>

HTML注释
< !- -这里是注释的内容- ->

③head标签（标题标签）

在这里插入图片描述
-meta定义编码
-title标签设置网站标题标签

④h标签和p标签（paragraph）

在这里插入图片描述

⑤strong（加粗）和em（倾斜）标签

在这里插入图片描述
strong标签——加粗
em标签——倾斜

⑥br标签（换行）

单闭合标签，换行标签
空白折叠现象——HTML在浏览器上会将多个空格或者换行折叠成一个空格显示
在这里插入图片描述

⑦特殊符号

查询网址：http://tool.chinaz.com/Tools/HtmlChar.aspx
例如：® & reg;

⑧hr标签（水平分割线）

在这里插入图片描述
hr标签也是单闭合标签，用于段落之间创建一条分割线

⑨ul标签（无序列表标签，搭配子标签li使用）

ul：unordered list
在这里插入图片描述

ul标签会向内缩进
li标签就是前面的小圆点
ul标签的属性： type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识

⑩ol标签（有序列表标签）

ol：ordered list
在这里插入图片描述

ol标签下的子标签li会自动按照123的顺序显示
ol标签的属性：
type：列表标识的类型
1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符
列表标识的起始编号默认为1

①①dl标签（定义列表）

dl：definition list
dt：definition title定义标题
dd：definition description定义描述
在这里插入图片描述

①②table标签（表格）

table需要由tr，th，td组合

tr：table row代表表的每一行
th：table head填写的是表头（字段）
td：table data填写的是表数据
设置表格边框，宽度为1< table border=“1”>
设置表格边框为实线（单元格之间的距离为0）< table border=“1” cellspacing=“0”>

①③caption标签（表格标题）

在这里插入图片描述

加在tr标签上面

①④表格的横向合并和纵向合并

横向合并：在字段行的th标签加上colspan="2"表示向后合并2列
纵向合并：在数据行的td标签加上rowspan="3"表示向下合并3行，并将后两行的品牌标签删除

①⑤a标签（超链接）

a：anchor锚点，超链接
在这里插入图片描述离开href标签的a标签没有作用

href属性：Hypertext Reference是超链接去的网址
title属性可以让鼠标悬浮时显示对应的提示
target属性：默认为_self，在当前页面打开超链接的网址，设置为_blank可以在新页面打开网址
id属性在当前页面进行跳转：类似淘宝中的返回顶部按钮
1、在顶头随便写个空白标签，定义唯一的属性id
2、尾部写a标签，href要加#号和id名
利用a标签发送邮件：href = “mailto：123456@qq.com”

①⑥img标签（图片）

img属于单闭合标签
在这里插入图片描述

src属性：source

相对路径：当前目录./；上级目录. ./;上上级目录…/
如果图片与html文件属于同级目录，直接写文件名即可
如果图片存在html脚本文件同级文件夹下，写上路径：

如果图片存在html文件的上级文件夹下，路径为：
绝对路径：
也可以插网络图片链接

width和height属性

设置宽和高，通常只设置一个宽度或高度，浏览器会自动计算原图等比例的大小
alt属性
当由于文件路径不正确或网络原因打不开图片时，alt可以定义提示信息给用户
title属性（鼠标悬浮在图片上提示文字）

①⑦form标签（表单）

表单用于显示、收集信息，并将信息提交给服务器
在这里插入图片描述

input标签：输入框
type=text 代表明文
type=password 代表密文
type=submit 代表提交数据
type=file 代表浏览文件
placeholder代表输入框为空时的提示符
value代表输入框上的文字，在submit上是按钮文字，在text上是默认账号
form标签
action属性是数据提交到哪个数据库
method模式有get和post

input聚焦选中文本

在这里插入图片描述

<input type="text" value="今天天气晴朗">

<script>
	#必须和focus配合使用，聚焦时才会选中文本
    $('input').focus();
    $('input')[0].setSelectionRange(1,5);	#聚焦后选中文本索引1~5的字符
</script>