web前端人生——html

最新推荐文章于 2024-09-25 11:38:58 发布

hycxag

最新推荐文章于 2024-09-25 11:38:58 发布

阅读量276

点赞数

分类专栏： html+css 文章标签： web

本文链接：https://blog.csdn.net/hycxag/article/details/85396213

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

存在即合理
为什么存在这么多浏览器——主要有利润可寻。

浏览器内核分为两部分——渲染引擎和JS引擎。渲染引擎：负责取得网页的内容（html，xml、图像等等）、整理信息（例如加入css等），以及计算网页的显示方式，然后输出至显示器或打印机。不同的浏览器的内核对同一网页的语法解释会有所不同，所以渲染效果也不相同。

JS引擎则是解析JavaScript语言，执行JavaScript语言来实现网页的动态效果。

浏览器内核更倾向于指渲染引擎。常见内核为：IE内核，firefox内核，safari内核（webkit），chrome内核（chromium/blink），opera内核(presto)。

移动浏览器：使用最高为webkit内核。

web标准——针对多个浏览器对同一个网页内容显示相同效果，规定了web标准。主要构成：结构（构成网页的基本元素——html），表现（设置外观样式——css），行为（对网页进行交互——JavaScript）三个方面。

在这里插入图片描述

HTML——超文本标记语言，用来描述网页的语言。超文本指：可以加入图片，声音，动画，多媒体等，以及可以从一个文件跳转到另外一个文件，与世界各地主机的文件进行连接。

HTML语言的语法骨架格式：

<HTML>
	<head>
	<title></title>
	</head>
	<body>
	</body>
</HTML>

HTML标签：所有HTML中标签的一个根节点。称为跟标签
head标签：文档的头部（页面的头部），文档头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等。绝大多数文档头部包含的数据不会真正作为内容显示给读者。注意在head标签中我们必须设置的标签是titile
title标签：文档的标题
body标签：文档的主体。body元素包含文档的所有内容（例如文本、图片、视频等）

html标签分类

双标签——一对尖括号 <></>
单标签——一个尖括号</>。例如<br /> 。/称为关闭符。

<!DOCTYPE html> #告诉使用那个html版本，即告诉你使用html5
<html lang="en"> #采用语言
<head>
	<meta charset="utf-8"> #字符集编码
	<title>Document</title>
</head>
<body>
 hello world！
</body>
</html>

排版标签

标题标签：单词head的缩写。HTML提供了6个等级的标题，即<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
段落标签：单词paragraph缩写。<p>
水平线标签：单词horizontal的缩写。<hr />
换行标签：单词break的缩写。<br />。注意换行的距离没有段落与段落之间的距离大。

本文格式化标签

b,i,s,u只有使用，没有强调含义；而strong，em，del，ins语义更强烈（推荐使用语气强烈的）
7. 加粗 <strong>或<b>
8. 倾斜<em>或<i>
9. 删除线<del>或<s>
10. 下划线<ins>或<u>

div和span标签

这两个标签没有语义，是网页布局主要的两个盒子。
div是division的缩写（分割，分区含义），用很多div来组合网页，一行只能一个div。
span跨度，范围，一行可以显示多个span

图像标签img

image的缩写，src是img的必须属性：<img src="url" / >，其它对应的img属性：
在这里插入图片描述

链接标签 a

单词achor的缩写，格式：<a href="跳转目标" target="目标窗口弹出的方式"> 文本或图像</a>
href的属性为url；target取值有self和blank。self为默认值，blank为在新窗口中打开方式。
注意事项：

外部链接，则需要添加http://；而内部链接则可以直接链接内部页面名称即可。
若没有确定链接目标时，可以将属性值定义为#，表示链接占时为空链接
可以创建文本，图像，视频等链接

锚的重点（主要用于目录快速定位文章内容）

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

使用"a href="#id名"链接文本/a"创建链接文本。
使用相应的id名标注跳转目标的位置。

<a href="#live">3 个人生活</a>
....
<h3 id="live">个人生活</h3>

base标签

设置整体连接的打开状态。针对<a>标签中的target属性的设置——较为麻烦，用base标签来进行统一设置。
<base target="_blank" /> 所有的链接以新的窗口打开。若针对某个链接状态的打开，仍需使用<a>标签的属性target

特殊字符标签

在这里插入图片描述

注释标签

（以结尾）

路径

相对路径

同级路径：只需输入文件名称即可
下级路径：需要文件夹和文件名
上级路径：../../表示上两级路径

绝对路径

本地路径
网络路径
从根路径出发，得到完整的文件路径

列表标签

特点——整齐，整洁，有序

无序列表<ul>和<li>标签构成
没有顺序级别之分，是并列的

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
<\ul>

注意事项：

<ul>标签里只能放<li>标签
<li>标签中可以放其它标签

有序列表<ol>和<li>标签构成

<ol>
	<li>...</li>
	<li>...</li>
	<li>...</li>
<\ol>

注意事项：

<ol>标签里只能放<li>标签
<li>标签中可以放其它标签

自定义列表 dl,<dt>和<dd>组成
常用于对术语或名词进行解释和描述，自定义列表没有任何项目符号

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

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

表格

表格不是用来布局，主要是用来显示数据的。
创建格式

<table width="500" border="1">
<caption>表格标题</caption>
<tr> #每行
<td>单个内的文字</td>
...
<td>单个内的文字</td>
</tr>
...
</table>

表格属性
在这里插入图片描述
一般表格的border,cellspacing,cellpadding的属性值都为0。
注意：
给table标签的align属性设置center，是表格居中对齐；而对tr标签的align属性设置center，是此行的单元格内容都居中对齐。

表头标签（第一行或第一列采用）`<th>`

table head的缩写，用来代替<td>。增加了加粗且居中功能。

表格标题caption

仅存在于表格里面，离开表格标签是不能用的，而且紧跟table标签之后。

表格结构 thead,tbody

使用表格布局的时候，可以将表格划为头部，主体和页脚

<table>
 <caption> </caption>
	 <thead>
		 <tr> #每行
		<td>单个内的文字</td>
		...
		<td>单个内的文字</td>
		</tr>
	 </thead>
	 <tbody>
		 <tr> #每行
		<td>单个内的文字</td>
		...
		<td>单个内的文字</td>
		</tr>
	</tbody>
</table>

合并单元格属性（从上到下，自左向右）

跨行合并 rowspan，例如<td rowspan="2"> 单元格内容</td>，合并两个单元格
跨列合并 colspan

表单

表单由三部分组成：表单控件，提示信息，表单域（将表单的信息放在一起提交过去）

input控件
格式

radio属性选择如果是一组，则我们必须给他们命名相同的名字name

<td>
	男<input type="radio" name="sex"/>
	女<input type="radio" name="sex" checked="checked"/> #只能多选一(默认女被选中)
</td>

lable标签

为input标签服务的

<label> 用户名：<input type="text" /> </label>
<label for="pwd">
	用户名:<input type="text" />
	密码：<input type="password" id="pwd" /> #无论点击哪个汉字可以到密码框
</label>

textaera控件（文本域）

文本框只能写一行文本；文本域可以写多行。

<textarea cols="每行字符数" rows="显示的行数">文本内容
</textarea>

下拉菜单select

<select name="" id="">
<option value="">选择年份</option>
<option value="" selected="selected">1990</option> #默认被选中
<option value="">1991</option>
</select>

表单域form

便于分离。

<form action="url地址" method="提交方式" name="表单名称">
	用户名:<input type="text" name="yourname"/><br/>
	密码：<input type="password" id="pwd" name="pass"/><br/>
	<input type="submit" value="提交">
	<input type="reseet" value="重填">
	#若采用get提交后会在网址后面加上"?yourname=   &pass=   "## 标题  
</form>