html基础

浏览器内核

  • Trident(IE内核)：前缀名-ms-
  • Gecko(Firefox):前缀名-moz-
  • Webkit(safari):-webkit-
  • Opera:-o-
  • 谷歌浏览器:-webkit-

seo优化

  • SEO，即Search Engine Optimization， 搜索引擎优化，是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。

    搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。

    合理的title、description、keywords

    搜索对着三项的权重逐个减小，title值强调终点即可；description把页面内容高度概括，不可过分堆砌关键字；keywords例举出重要关键字。

    1.title

    title，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到(搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要)，title一般不超过80个字符，而且词语间要用英文"-"隔开,因为计算机只对英文的敏感性较高，对汉语的敏感性不高。

    用法:

    <title>IT培训机构|专注编程培训|软件开发培训_华清远见教育集团</title>

    （1） 首页title写法，一般是"网站名称-主关键字词或一句含有主关键字的描述"。一般网站名称放在后面，因为搜索引擎给予标题最前面的词比后面高。比如:"冰箱_变频冰箱-海尔官网”

    （2）文章页title写法，一般有3种：“文章标题-网站名称”、“内容标题-栏目名称-网站名称”、“内容标题-网站名称”。其中，“内容标题-栏目名称-网站名称”的写法最规范，它能给用户很好的提示，让用户知道他在访问哪篇文章，并且是在哪个网站的哪个栏目下。

    2.description （内容摘要）

    description是对于一个网页的简要内容概况。description一般不超过150个字符，描述内容要和页面内容相关。

    用法：

    <meta name="description" content="你网页的简述">

    （1）首页description写法，一般是讲首页的标题、关键字和一些特殊目的的内容融合到里面，写成简单的介绍。

    （2）文章页keywords写法，建议提取文章中的关键字。

    <meta name="description" content="华清远见官网,15年品牌IT培训机构。IT培训课程涵盖嵌入式、Android、Java、HTML5、大数据、VR、UI、物联网,python多个方向的编程培训。全国有12个IT就业培训直营校区,每年向社会输送软件开发培训人才上万名">

    3.keywords（关键字）

    keywords，主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配，才有利于排名。keywords一般不超过3个，每个关键字不宜过长，而且词语间要用英文","隔开。尽量将重要的关键字靠前放，因为靠后的关键字排名较差，除非你占有很高的权重。

    用法:

    <meta name="keywords" content="关键字1,关键字2,关键字3,关键字4">

    （1）首页keywords写法，一般是"网站名称,主要栏目名,主要关键字"

    <meta name="keywords" content="IT培训,IT培训机构,编程培训,编程培训机构,软件开发培训,软件开发培训机构,IT教育,IT学校,华清远见">

快捷键

  • html:5 !+tab
  • ctrl + f:查找
  • ctrl + / :注释
  • h${内容$}*6:标题快捷
<!DOCTYPE html> //声明当前页面的版本，发展过程中的版本很多
lang = 'en'//说明整个文档使用的语言，en英文;zh中文，fr法语
charset='utf-8' // 设置字符集 常见的有Unicode utf-8 GB2312 GBK(兼容GB2312) BIG5
head // 元消息 
title // 网页的标题
body // 网页主题部分

标签分类

  1. 单标签：没有结束标签，单个的
  2. 双标签：有开始和结束标签

  1. 块元素：自己独占一行；可以设置高度，宽度和内外边距；宽度默认是100%，如果不加高度里面油没有内容，即使是块级高度此时高度为0

  2. 行内元素：相邻的在一行，直接写宽度和高度没有效果，默认的宽度是本身内容的宽度；严格意义来说没有行内块元素，添加了display: line-block，添加浮动等改变了元素的性质后才称为行内块元素

    行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距（本身可以设置，但后面的元素不认同垂直方向的）

  3. 行内块级：可以设置宽高，但不换行

规范

  1. 行内不能嵌套块级，块级可以嵌套行内

  2. 有几个特殊块级只能嵌套行内元素 h1~h6 p dt

    p标签不能嵌套块级，包括它自己本身，不然p嵌套的块级设置css不起作用

  3. li标签和dd标签可以嵌套任何元素

  4. a标签最好不要嵌套块级元素，放块级元素，但是给a转换一下模式最安全，可以嵌套行内元素，但不能嵌套a标签和input标签

  5. ul和ol子元素只能是li,不能是别的元素

  6. button里面不要嵌套a，不然js里面会有两个事件，还有就是button里面放img要记得给图片添加alt属性

元素的显示模式转换：一个模式的元素需要另外一个模式的特性

  • display: block转换为块级元素

  • display: inline转化为行内元素

  • display: inline-block转换为行内块元素

    注意：中间会有空隙 原因是元素间会有空格

    解决方法

    • 写在一行 (不好看)
    • margin (不好控制)
    • 父元素的font-size设置为0 子元素的font-size在重新设置
    • 设置浮动
    • 同理img图片之间的空隙也可以这样解决

路径

  • 绝对路径：网络路径和磁盘路径

  • 相对路径

    ./能访问与当前文件同层级的文件或文件夹

    ../能访问当前文件上一层文件或文件夹

    注意：不要超过4层

    ../*n 能够访问当前文件夹上n层的文件或文件夹

特殊字符

&nbsp;	空格
&lt;	小于
&gt;	大于
&sup;	次方 
2&sup1; 只有123,没有4
&copy;	版权符
90&deg;	度数
&reg;	注册商标
&times;	乘号
&divide;	除号
&yen;	人民币
&LT;	小于
&GT;	大于
&laquo;	&rlaquo;	//《》

标题标签

块级元素

<h1>~</h1> ...
<h6>~</h6>

会对字体进行放大和加粗的效果

注意：嵌套的时候不要放块级

段落标签

块级元素

<p>一个段落</p>

不会对文字进行修改

注意：嵌套的时候不要放块级

水平线标签

<hr>

换行标签

<br>

div标签

块级元素

<div></div>

不修饰里面内容,用来布局会换行最多

span标签

行内元素

<span></span>

用来放文本用到最多,和普通文本一样，不会换行，不会修饰

文本修饰标签

<i>倾斜</i>
<b>加粗</b>
<s>删除线</s>
<u>下划线</u>
// --------------
<em>倾斜</em>
<strong>加粗</strong>
<del>删除</del>
<ins>下划线</ins>

区别：后者是有语义化的，h5趋向于语义化，建议使用后者，但实际效果没有变化

a超链接

行内元素

注意：a里不能放a标签

<a target="_blank" > 
<a href="#" download=""></a>
// 下载文件
//target="_self"就在当前的页面打开
//target="_blank"另外开一个窗口打开

  • 外部链接 地址必须以http://开头

  • 内部链接 内部页面的链接，直接写网页的名字

  • 空链接 暂时没有连接地址，用#代替就可

  • 下载连接 地址连接的是文件，是zip或是exe

  • 网页元素的链接

  • 锚点标签，可以迅速的定位页面的某个位置，如果没有写id名，则返回到页面顶部

    <a href = "#id名">连接问本</a>

    <a name='名字'></a>
<a href='#名字'></a>

base标签

可以设置整体链接打开的状态是以新窗口打开还是当前窗口打开

<base target="_blank" href=''>
  1. 只能应用与head标签之间
  2. 网页上所有超链接打开方式
  3. 网页上所有的相对路径都会拼接href里面的地址

img标签

<img src='地址' alt='#' border='' width='' height=''>
//如果因为某种原因，图片没有正常显示，则出现alt里面的内容

注意：可以设置宽高，但不换行

表格标签

<table border='1' cellpadding='10' cellsapcing='0' align='center'>	//表格标签
			  <tr align='center' valign='center'> 	//行标签
			  <tr align='center' valign='center'> 	//行标签
				  <td align='center' valign='center'>	//单元格标 签
				  </td>
			  </tr>
</table>

th表头标签,文字加粗，居中显示

cellpadding:规定单元格与内容之间的空白，默认的1像素

cellsapcing:单元格边框和外层表格边框的空隙

align:center left(默认) right表格再网页中水平的排列方式

valign:middle(默认) top botm

合并单元格

跨行合并（rowspan ）：rowspan="合并单元格的个数"

跨列合并（colspan）：colspan="合并单元格的个数"

目标单元格

跨行:最上侧单元格为目标单元格，写合并代码

跨列:最左侧单元格为目标单元格，写合并代码

步骤:

1.先确定是跨行还是跨列

2.找到目标单元格,写上合并方式 = '合并单元格的数量' 比如<td colspan='2'></td>

3.删除多余的单元格

列表

有序列表

ol和ul里面只能是li,li标签里面可以是任意标签

<ol tpye='square'>	//square:方形 circle:实心圆（默认）
			<li>刘德华 1000</li>
			<li>肖战 3000</li>
			<li>pink老师  100</li>
</ol>

无序列表

<ul>
			<li>榴莲</li>
			<li>香蕉</li>
			<li>苹果</li>
</ul>

自定义列表

dl dt dd组合而成

dd可以嵌套任意元素

<dl>
    <dt>名词</dt>
    <dd>名词描述</dd>
    ...
</dl>

表单

表单：收集用户信息

组成：表单域，表单控件（表单元素）和提示信息三部分

from标签

表单域是一个包含表单元素的区域

from标签定义表单域，以实现用户信息的收集和传递

 <from action="url地址" method="提交方式" name="表单域名称">
 //url表单内容提交服务地址

input输入标签

  <inout type="属性值" name="表单元素的名称" value="提示文字" size='40' placeholder="占位符，鼠标聚集则消失"/>

input::-webkit-input-placeholder {	// 修改input表单里的值的修改方法
    color: red;
}

name 和 value 的值属性值，主要给后台人员使用

size控制input框的宽度

type值

  • text:文本框，用户可以输入任何文字

  • password:用于密码框的输入,用户看不见

  • radio:单选按钮 name的名字必须有同一个名字才可以多选一

  • checkbox：复选框 可以实现多选

  • image:和提交按钮一样，只不过是以图片形式

  • checked：针对单选按钮和复选框，当页面打开时就选中

  • maxlength：约束最多的字符数，少用，可以用正则表达式

  • submit:表单域里面的值送到后台去

  • reset：重置按钮，还原成默认状态

  • button：普通按钮，不会提交数据，可以和js搭配使用

  • file：文件域，获取文件信息

lable标签

<iptut id="sex"/>
<label for="sex">放文本的地方</label>
// for里是input里面的id
//效果：点文字男可以聚焦input

案例

 <form action="3表格.html" method="get " name="表单1">
			 用户名：<input type="text" value="请输入用户名"/> <br />
			 密码：<input type="password" /> <br />
			 
			 性别：<label for="boy">男</label><input type="radio" name="sex" value="男" id="boy"/> 
			  <label for="gril">女</label>
			  <input type="radio" name="sex" value="女"/ id="gril">  <br />
			 爱好：吃饭 <input type="checkbox" checked="checked" /> 睡觉 <input type="checkbox" />打豆豆 <input type="checkbox" />
		     <br />
			 <input type="submit" value="免费注册"/> <br/>
			 <input type="reset" value="重置" /> <br />
			 <input type="button" value="获取短信验证码" /> <br />
			 选取文件：<input type="file"  /> <br />

slect标签

下拉表达元素：节约页面空间，多个选线让用户选择

至少包含一对option标签,默认选项selected="selected",默认选中第一个

			  <select>
				  <option selected="selected">1</option>
				  <option>2</option>
				  <option>3</option>
			  </select>
			  <br />

button标签

button表示一个按钮，但是如果button放在from里面，相当于提交按钮

如果让button在from里是一个普通按钮，就要给出type属性是，属性是button

<form>
    <button type='button'>立即注册</button>
	<input type='button' value='立即注册'>
</form>
posted @ 2022-05-06 20:11  a立方  阅读(42)  评论(0)  编辑  收藏  举报