网站里的动态是如何制作,番禺人才网单位招考,怎样建网站赚钱,高邮市建设网站目录
前言
正文
head
SEO
body
网页的主要组成元素#xff1a;
body标签中常见的标签#xff1a;
自闭合标签#xff1a;
无语义标签#xff1a;
特殊符号#xff1a;
列表
子项#xff1a;
样式修改#xff1a;
定义列表#xff1a;
语义化#xff1…目录
前言
正文
head
SEO
body
网页的主要组成元素
body标签中常见的标签
自闭合标签
无语义标签
特殊符号
列表
子项
样式修改
定义列表
语义化
表格
基本结构
完整结构
其他table标签
特殊标签
img标签
常见三属性
图片格式
位图
矢量图
总结
超链接
常见属性
分类
锚点链接
表单
form标签
常用属性
特别注意
input
单行文本框和密码文本框
单选框
复选框
按钮
下拉列表
select标签
option标签
写在最后 前言
精读一本书胜过看N个视频。
这次看的书是 吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》 17年出版的。 正文
HTML主要学的就是标签了所以本文着重描述标签。
标签的语义化也是一个很重要的点它对于提升SEO有着比较小的影响但是星星之火可以燎原。学好语义化也能让自己的代码写起来更加流畅知道该用什么标签。
下面正式开始。 head
head标签的内部标签 title、meta、link、style、script、base基本不用 其中最常用的是title、link、style。 title标签用于创建网页标签的标题link用于加载外部CSS样式文件script用于加载外部的JS文件/直接书写JS代码。 meta标签可以进行自动跳转可以参考这篇文章meta标签的妙用。 网页乱码解决meta charsetutf-8 对了还有一个重要的标签就是有关于语言的 html langen en是英文的意思cn是中文。 此外中文还分为简中、繁中感兴趣的可以去了解。 SEO
这节是课本没有多说的但是是不是提起的所以单独拿出来写了。 网页的SEO主要的目的就是提高网站的曝光度。 SEO跟网页的语义化有关系。
比如说一个网页只能有一个h1标签meta标签的内容要完善能用语义化的标签是最好的。 body
网页的主要组成元素 文字、图片、超链接、音频和视频 判断页面上是否是动态页面的标准——有无后端的交互过程。 body标签中常见的标签 标题标签h1-h6没有h7以上的。 段落标签p。 文本标签strong、em、sup、sub、i字体图标。 自闭合标签 水平线hr。 换行br。 此外还有meta、input、img、link。 无语义标签 div、span 可以把这两个看成两个容器前者大后者小。 但是不能用这两个标签去替代有语义的标签防止SEO排名的降低。 特殊符号 空格ensp; nbsp; 版权符号copy; 注册商标reg; 商标trade; 度数deg; 列表
列表分为有序列表和无序列表 有序列表olordered list。 无序列表ulunordered list。 子项 列表项lilist。 ol/ul标签只能配合li标签使用li标签也是同样如此。 ol/ul标签内部不允许出现非li标签独立文本也不允许。 样式修改 标签属性type。 现在一般使用CSS样式修改line-style。 定义列表 definition list简称dl就是定义列表 definition term简称dt就是定义名词 definition description简称dd就是定义描述解析定义名词 语义化
为什么不能用div标签替代 为了提高SEO所以要尽量使用有语义的标签 表格
表格布局在web2.0标准被抛弃了。
基本结构 表格table标签。 行tr标签table row的简写。 单元格td标签table data cell的简写。 完整结构 表格标题caption一个表格只能有一个。 表头单元格th标签table head cell的简写内容默认加粗注意与td标签区分。 一个完整的表格结构应该包括table、caption、tr、th、td标签。
但是这会混乱th该用在哪里td又该用在哪里
其他table标签 thead表头区域一般只包含tr、th标签行头。 tbody表身区域一般包含tr、th列头、td标签。 tfoot表尾区域一般只包含tr、td标签。 意义标签语义化更易读。 特殊标签 合并行rowspan跨行合并单元格。 合并列colspan跨列合并单元格。 img标签
图片标签常用的三个属性 src、alt、title。 常见三属性 src图片所在路径路径可以是本地最好是相对路径可以是云端必不可少的属性。 alt、title制定图片的提示内容。alt是在图片无法正确显示的时候才会出现是写给浏览器看的也就是提升SEOtitle是鼠标悬停的效果给用户看的。 图片格式 图片可以分为位图、矢量图。 位图 也称为像素图放大缩小都会失真色彩丰富。 常见格式jpg包括jpeg、png支持透明、git可以做动画支持透明。 矢量图 也称向量图一般指的是几何图像放大缩小不会失真但是色彩不够丰富。 常见格式ai、cdf、fh、swf最常见也就是flash动画。 特别注意字体图片用的也是矢量图。 总结 位图适合展示色彩丰富的图片矢量图不适合。 位图的单位是px而矢量图是数学向量。 位图受分辨率影响矢量图不会。 网页中的图片绝大多数都是位图除了字体图标。 超链接 特别标签a标签可以包裹除了本身以外的所有标签。 常见属性 href路径可以是相对路径也可以是绝对路径可以是本地也可以是云端。 target打开方式默认是_self原窗口打开常用的是_blank新窗口打开。 分类 文本超链接、图片超链接。 区别一个是应用在文本一个是应用在图片。 锚点链接 含义内部链接的一种 作用用于跳转到本页面的指定地方 使用href标签里面采用#id的名字进行跳转的地方采用divid的方式进行区别。 表单
表单元素输入框、按钮、下拉菜单。
表单标签 form、input、textarea、select、option。 form标签 创建一个表单就像是创建一个表格必须要把所有有关标签填入到form标签内部。 常用属性 name表单名称利于后面JS获取元素getElementsByName method提交方式 action提交地址 target打开方式跟a标签是一致的 特别注意 name属性是最重要的用于区别其他form元素。 method的属性值只有get和post最常用的是post安全性更高。 input
含义根据type属性值的不同有不同的功能可以是输入框可以是密码框可以是单选框......
type属性值 text单行文本框 password单行密码框 radio单选框 checkbox多选框 button或submit或reset普通按钮、提交按钮、重置按钮 file文件上传 单行文本框和密码文本框 typetext和typepassword 重要属性 value默认值输入框的默认显示内容。 size文本框的长度一般不用也可以使用width来修改。 maxlength内容的最大长度一般用于限制输入。 区别 单行文本框可见内容。 密码文本框不可见内容但不代表密码框比单行文本框安全只是能保证本地输入的安全而已。 单选框 typeradio 重要属性 name组名跟哪个radio是同一组的比如说性别。 value取值一般用于传递数据JS常用设置。 checked是否选中可以设置默认选择。 特别注意 如果没有name组名那就失去了单选的意义。 语义化 用label标签包裹input框。 label里面的for属性值要跟单选框的id一致才能进行绑定。 复选框 typecheckbox 重要属性跟radio一致 name和value必须设置也可以使用checked进行默认选中。 但是无语义化。 按钮 typebutton 分为三种常用的按钮 普通按钮typebutton一般都是配合JS使用的功能为自定义。 提交按钮typesubmit用于表单提交。 重置按钮typereset用于清空表单输入。 特别注意 三者在外观上没什么区别只是功能上的区别。 普通按钮和button标签哪个更常用 开发的时候都是使用input来替代button标签的。 下拉列表 select标签配合option标签跟无序列表差不多。 select标签 multiple可以选择多项默认是单选选择。 size显示的列表项个数。 注意size1/2/3在Chrome浏览器中无效因为Chrome最低是4个。 option标签 selected默认选中。 value选项值。 value是配合JS和服务器数据进行的一般是用来传递所选择的值。 写在最后
在本文中并没有给出所有标签只是写了常用的标签。
由于能力有限部分描述也许不恰当还望海涵并多多指教。 精读一本书胜过看N个视频。
为什么推荐读书
因为视频的知识很散你没有一个清晰的脉络。
当然啦也不是说视频不好只是在看视频之后为了巩固知识还是要看看书本的。
只是书本的编写凝聚了作者的心血在编排上会更加易懂、符合初学者学习。
总之多看书是好事。 那么我们下期再见。
