html标签是由<>包围的关键词html标签是成对出现的有部分标签是没有结束标签的,叫单标签,页面中所有的内容,都是要放在HTML标签中的
HTML标签分三部分:标签名称标签内容标签属性
HTML标签具有语义化
语义化就是仅通过标签名就能判断出该标签的内容
语义化的作用:网页结构层次更清晰更加容易被搜索出来更加让屏幕阅读器读出该页面的内容
标签的内容就是在一对标签内部的内容标签的内容可以是其他标签
标签元素全局标准属性
class属性:用于定义元素的类名
id属性:用于指定元素的唯一id
style属性:用于指定元素的行内样式
title属性:用于指定元素的额外信息
accesskey属性:用于指定激活元素的快捷键
tabindex属性:用于指定元素在tab键下的次序
dir属性:用于指定元素中内容的文本方向
属性值为ltr 或 rtl,left to right 和 right to left
leng属性:用于指定元素内容的语言。
全局事件属性
onload:在页面加载结束之后触发
onunload:在用户从页面离开时发生,如点击跳转,页面重载,关闭浏览器窗口等。
form表单事件
onblur:当元素失去焦点时触发
onchange:在元素的元素值被改变时触发
onfocus:当元素获得焦点时触发
onreset:当表单中的重置按钮被点击时
onselect:在元素中文本被选中后触发
onsubmit:在提交表单时触发
keyboard键盘事件
onkeydown:在用户按下按键时触发
onkeypress:在用户按下按键后,按着按键时触发,该属性不会对所有按键生效
不生效的有:alt, ctrl, shift, esc
onkeyup:当用户释放按键时触发
Mouse鼠标事件
onclick:当在元素上发生鼠标点击时触发
onblclick: 当元素上发生鼠标双击时触发
onmousedown:当元素上按下鼠标按钮时触发
onmousemove:当鼠标指针移动到元素上触发
onmouseout:当元素指针移出元素时触发
onmouseover:当鼠标指针移动到元素上时触发
onmouseup: 当在元素上释放鼠标时触发
media:媒体事件
onabort:当退出时触发
onwaiting:当媒体已停止播放但打算继续播放时触发
HTML的标签
文本标签
段落标签
段落标签用来描述一段文字
标题标签
标题标签用来描述一个标题
标签标签总有六级。
强调语句标签
用于强调某些文字的重要性
更加强调标签和标签一样,用于强调文本,但它的强调更强一些
无语义标签该标签没有语义
短文本引用标签简短文字的引用
长文本引用标签
换行标签
标签作用相当于word文档中的回车,起到文字换行的作用。
多媒体标签
<video src="da.mp4" controls="controls">
音频标签
<audio src="a.mp3"></audio>
列表无序列表标签
<ul><li></li></ul>
有序列表
<ol><li></li></ol>
定义列表
定义列表中的项目描述列表中的项目
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
表格:表格标签 表格合并 同一行内,合并几列colspan="2" 同一列内,合并几行rowspan="2" 表单标签 action:浏览者输入的数据被传送到的地方,比如一个php页面 method:数据传送的方式 输入标签 inputname为文本框命名,用于提交表单,后台接收数据用value为文本输入框设置默认值type通过定义不同的type类型,input的功能有所不同 type功能:text,password,radio,checkbox,file,button,reset,submit,email,url,number,range,date,color 下拉选择框select 文本域textareacols:多行输入域的列数rows:多行输入域的行数 其他语义化标签div盒子俗称盒子,division分割 在网页制作过程中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就是相当于一个容器。 什么是逻辑部分,它是页面上相互关联的一组的元素,如网页中的独立的栏目版块,就是一个典型的逻辑部分。 网页头部header html5新增语义化标签,定义网页的头部 主要用于布局,分割页面的结构 底部信息footer html5新增语义化标签,定义网页的底部 主要用于布局,分割页面的结构 导航nav html5新增语义化标签,定义一个导航主要用于布局,分割页面的结构 文章article html5新增语义化标签,定义一篇文章主要用于布局,分割页面的结构 侧壁栏aside 语义化标签,定义主题内容外的信息主要用于布局,分割页面的结构 时间标签time语义化标签,定义一个时间 网页结构 title定义文档的标题link标签将css样式文件链接到html文件内 meta定义文档的元数据 每个网页都是由不同的功能模块组成的,因此在将制作网页的时候,我们要将网页的每个功能模块分开 常见多由头部区,展示图片区域,主题区域,底部信息区域组成。 网页由上到下,由内到外 div,header,footer,nav,article,aside等标签多用于模块划分 css全称为层叠样式表,它主要用于定义HTML内容在浏览器内的显示样式,如文字的大小,颜色,字体加粗等。 css代码通常存放在style标签内 css样式由选择符和声明组成,而声明由属性和值组成 选择符{属性:值} 选择符,叫选择器 css放置直接书写在标签的style属性中,不建议使用 内联样式表外联样式表 css中的继承 不可继承样式:display,margin,border,padding,background,height,min-height,max-height,width,min-width,max-width,overflow,position,left,right,top,bottom,z-index,float,clear 可以继承的样式letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction,visibility,cursor 选择器的种类 标签选择器通配符选择器属性选择器后代选择器一级子元素选择器id选择器class选择器伪类选择器 选择某个父元素的直接子元素后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素。 群组选择器可以对多个不同的选择器设置相同的样式 选择器的优先级: 权重计算方式: 标签选择器:1,class选择器:10,id选择器:100,行内样式:100,!important最高级别,提高样式权重,拥有最高级别就近原则 css样式属性 background-colorbackground-imagebackground-position背景图片不会占位 背景图片重复background-repeat background-repeat: no-repeatno-repeat: 设置图像不重复,常用round: 自动缩放直到适应并填充整个容器space:以相同的间距平铺且填充满整个容器 背景图片定位background-attachment background-attachment:fixed 背景图像是否固定或者随着页面的其余部分滚动 background-attachment的值可以是scroll跟随滚动,fixed固定。 字体 font-family字体font-sizefont-weight: normal,bold,bolder,lighter,100-900(400=normal,700=bold) color字体颜色 字体斜体font-stylenormal文本正常显示italic文本斜体显示oblique文本倾斜显示 文本属性行高line-height文本水平对齐方式text-alignleft,center,right 文本所在行高的垂直对齐方式vertical-align baseline默认sub垂直对齐文本的下标super垂直对齐文本的上标top对象的顶端与所在容器的顶端对齐text-top对象的顶端与所在行文字顶端对齐 middle元素对象基于基线垂直对齐bottom对象的底端与所在行的文字底部对齐text-bottom对象的底端与所在行文字的底端对齐 文本缩进text-indenttext-indent: 2em; 字母之间的间距letter-spacing 单词之间的间距word-spacing 文本的大小写:text-transform capitalize:文本中的每个单词以大写字母开头uppercase:定义仅有大写字母lowercase:定义仅有小写字母 文本的修饰text-decorationnone默认underline下划线overline上划线line-through中线 自动换行word-wrap 基本样式:widthheight cursor鼠标样式:定义鼠标的样式cursor:pointer default:默认pointer:小手形状move:移动形状 透明度opacityopacity:0.3 可见性:visibillity visibility: hiddenvisible 元素可见hidden 元素不可见 collapse:当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。 溢出隐藏overflow 设置当对象的内容超过其指定高度以及宽度时如何显示内容 visible默认值,内容不会被修剪,会呈现在元素框之外 hidden 内容会被修剪,并且其余内容是不可见的 scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 auto 如果内容被修剪,则浏览器会显示滚动条以便查看 边框颜色:outline input文本框入框自带边框,我们可以通过outline修改边框 outline: none 清除边框 样式重置: 一开始没有css样式,为了界面美观,很多元素自带margin,padding等样式,但这些样式在不同浏览器的值都是不一样的,需要将css样式重置,保证在不同浏览器中显示一致。清除元素的margin和padding去掉自带的列表符去掉自带的下划线 关于目前文章内容即涉及前端,PHP知识点,如果有兴趣即可关注,很荣幸,能被您发现,真是慧眼识英!也感谢您的关注,在未来的日子里,希望能够一直默默的支持我,我也会努力写出更多优秀的作品。我们一起成长,从零基础学编程,将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。 若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。 这是一个有质量,有态度的博客表格的行表头单元格
表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。<form method="传送方式" action="服务器文件">按钮:button标签的功能与input按钮功能相同,button是双标签,内部可以嵌套其他行内元素。<select>
<option value="book"></option>
<option value="go" selected="selected"> go </option>
<option value="sport"></option>
</select><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>定义文档类型,告知浏览器用哪一种标准解释HTML。可告知浏览器其自身是一个Html文档。head定义文档的头部
头部元素title,script,style,link,meta:hover鼠标移入某个元素
.box:hover{
color:red;
}
:before在某个元素的前面插入内容
div:before{
content: '内容';
background-color: yellow;
color: red;
font-weight: bold;
}
:after在某个元素的后面插入内容
div:after{
content: '内容';
background-color: yellow;
color: red;
font-weight: bold;
}word-wrap: break-word;outline: 1px solid #ccc;* { margin:0; paddding: 0;}
ul,ol {list-style: none;}
a{ text-decoration: none;}
img,input { border: none; }请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的CSDN!
