首页 > 代码库 > HTML标签笔记
HTML标签笔记
1、软件：按照一定顺序组成的计算机数据和指令2、C/S: Client/Server 优点：界面效果 缺点：需要安装，占空间，需要升级 比如：qq，office，qq音乐，etc B/S: Browser/Server 优点：不需安装，不升级 缺点：界面效果 比如：金融行业，电商，互联网行业, etc3、HTML:超文本标记语言(HyperText Mark-Up Language) 语言：页面设计语言，一种解释性语言，运行在 浏览器上的 超文本：文字，图片，超链接，视频，音频，etc 标记：标签，<p>ddddd</p>4、编写HTML文件 1).新建一个文本文件(.txt),重命名为.html或者 .htm 2).HTML的架构： <html> <head></head> <body></body> </html> 3).写HTML内容： 在<body></body>里，添加HTML的标签 4).如果出现乱码则加下面这句话，否则不加 <meta http-equiv="Content-Type" content="text/html;charset=utf-8;"/>5、标签： 1).根据是否独占一行分类： 块级标签： 独占一行的标签，会在标签的前后自动加换行 <hn></hn>(n:1-6) <p></p> <hr /> <center></center> 行级标签： 不会独自占一行，前后不会自动加换行 <img src=""/> <a href=""></a> <font></font> <b></b>加粗 <i></i>斜体 <u></u>下划线 2).根据是否成对出现： 双标签：成对出现的，有开始有结尾 <tag></tag> :<hn></hn>(n:1-6) <p></p> 单标签：单独出现的,自动闭合 如： <hr /> <img src=""/> 特殊标签： 空格 <小于号 >大于号 "引号 ©版权符 空格： 慎用，每种字体浏览器解析出来的占用空间不一致6、hr标题标签 align: 对齐方式 center: 居中对齐 left: 居左对齐 right：居右对齐 <hr width="200px"/> <!-- 竖线效果 --> <hr width="1px" size="200px"/> <!-- 有颜色的 --> <hr width="100px" size="200px" color="red"/>7、a链接： href: 需要跳到的页面 target: _self: 在本网页打开，默认 _blank: 在新的标签页面打开 _parent: 在父页面打开 _top: 在最顶层的页面打开 framename: frame的name <!-- 功能性链接 --> <a href="mailto:wuxx@seecen.com">7、img标签： src: 图片路径，包括图片名称 title: 鼠标移上图片显示的提示信息 alt: 图片显示不出来的提示信息 width: 图片的宽度 height: 图片的高度 border: 图片的边框8、列表 ul：无序列表 li: 列表项 type: 列表项前面的符号 disc: 实心圆， 默认 circle: 空心圆 square： 方形 none: 没有 ol：有序列表： li: 列表项 type:设置前面序号的类型： 1：阿拉伯数字，默认 A: 英文字母大写 a: 英文字母小写 I：罗马数字，大写 i: 罗马数字，小写 list-style: 前面的修饰符 放在ul前面会去掉所有li前面的修饰符 放在li前面会去掉该li前面的修饰符9、表格 table： tr：表格的行 td: 表格的列 border： 边框 width: 宽度 height: 高度 caption: 表格的标题 th: 与td类似，但是内容会加粗居中 rowspan: 行合并，被合并的行需要删除 colspan: 列合并，被合并的列需要删除 cellspacing: 单元格之间的间距 cellpadding: 单元格边框与内容之间的距离，会增加单元格的大小 align: 对齐方式10、dl: 定义列表 dt: 描述主题 dd: 描述内容，可以有多个11、form: 表单，用来向服务器提交数据 action: 处理数据的地址 method：提交数据的方式 get：提交数据少，安全性不高，默认 post：提交数据多，安全性高 input： maxlength: 最大长度 value：值 placeholder: 提示语 readonly:只读 size: 输入框的长度 type: text: 输入框，默认 password: 密码框 radio: 单选框，需要分组 checked：选中 checkbox: 多选框，需要分组 checked：选中 file: 文件 hidden: 隐藏域 submit: 提交按钮 reset: 重置按钮 button: 按钮 image：图片提交按钮 select： 下拉框 option: 选项 selected: 默认选中 textarea: 多行文本框 cols: 列数 rows: 行数12、div div: division 分区 块级标签 默认宽度为父元素的100% 默认高度为0 需与CSS联合使用 contenteditable: 属性，内容是否可编辑 HTML5 border: 1px solid red; 边框 background-color: 背景色 border-radius: 四个角的弧度 CSS3 box-shadow: 5px 5px 10px red; 向下移5px，向右移5px，模糊度为10px，颜色为红色，阴影 CSS3 transform: rotate(10deg);旋转10度 CSS3 margin: 外边距 margin: 0px; 上，右，下，左外边距为0px margin: 20px 30px 40px 50px; 上外边距为20px,右外边距为30px,下外边距为40px,左外边距为50px margin: 20px 30px 40px; 上外边距为20px,左右外边距为30px,下外边距为40px margin: 20px 30px; 上下外边距为20px,左右外边距为30px, padding: 内边距 padding: 0px;上，右，下，左内边距为0px padding: 20px 30px 40px 50px; 上内边距为20px 右内边距为30px 下内边距为40px 左内边距为50px padding: 20px 30px 40px; 上内边距为20px 右左内边距为30px 下内边距为40px padding: 20px 30px; 上下内边距为20px 右左内边距为30px float: 浮动 left：左浮 right: 右浮 使用float时，两个块级标签都要使用 clear: both; 去除float的影响 margin-right: 右外边距 margin-left: 左外边距 margin-top: 上外边距 margin-bottom: 下外边距13、背景 background-color:背景色 background-image: url();背景图片， url: 图片的地址 background-repeat: 背景平铺 no-repeat: 不平铺 repeat-x: 水平方向平铺 repeat-y: 垂直方向平铺 background-position: x-offset y-offset;背景偏移 x-offset: 水平方向偏移 y-offset: 垂直方向偏移 14、文本修饰 font-size: 文字大小 color: 颜色 font-weight: 文字加粗 font-family: 字体 letter-spacing: 字符间距 word-spacing: 单词间距 text-indent:文本缩进 text-align: 文本水平对齐 left: 左对齐 center: 居中对齐 right: 右对齐 line-height: 行高 text-decoration: 文本修饰 none: 无 underline: 下划线15、框架集 框架集：不能与body同时使用 rows: 横向划分网页 frameborder: 是否显示边框 0：不显示 1：显示 border: 边框的大小 bordercolor: 边框颜色 scrolling: 是否显示滚动条，需在frame中使用 yes: 显示 no: 不显示 auto: 自动 noresize: 是否可以拖动frame的大小 cols: 将页面左右分开<frameset cols="40,*"><frame src="http://www.mamicode.com/left.html"/>16、边框 border: 1px solid red;大小 形状 颜色 形状： solid 实线 dashed 虚线 dotted 点线 border-top: 上边框 border-left: 左边框 border-bottom: 下边框 border-right: 右边框17、定位 position: 定位 absolute: 绝对定位，相对上级使用过position样式，且值不为static的元素进行定位， 否则相对与原点(0,0)进行定位 top: 垂直方向移动的距离 left: 水平方向移动的距离 position: fixed fixed： 固定定位，相对于浏览器定位 relative： 相对定位，相对原来的位置进行定位原来的区域会被保留 left: 左上角水平移动的距离 top: 左上角垂直移动的距离 z-index: 控制区域显示的层叠顺序值越大，越显示在上方，值越小，越显示在后方 在position都为relative时，必须设为负数或为018、选择器 #dv>p 子代选择器 #dv p 后代选择器 visibility: hidden; 隐藏元素，但元素原本的位置会被保留下来 visibility: visible;显示元素 div>p:nth-child(2){ } div>p:nth-child(odd){ } odd: 第奇数个元素 div>p:nth-child(odd){ } even: 第偶数个元素 display：none; 隐藏元素，元素原来的位置会被占据 block:以块级标签的形式显示元素 inline: 以行级标签的形式显示元素vertical-align: middle;图片垂直居中cursor:pointer; 19、字体标签 color: 颜色 face: 字体 size: 大小，负数缩小，正数放大(-7-7)<font color="blue" face="微软雅黑" size="7">字体标签</font>
HTML标签笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。