HTML总结 HTML详细介绍重要知识点
来源：互联网 发布：苏州淘宝模特招聘 编辑：程序博客网 时间：2024/06/14 00:40
标签 标题标签 <h1---h6> h1 字号最大 h6 字号最小 段落标签 <p>--</p> 换行标签 <br/> 字体加粗标签 <strong>---</strong> 字体倾斜标签 <em>---</em> 特殊符号 空格 &bnsp; 小于号 < 大于号 > 引号 " 版权符号 © 图像标签的基本语法 <img src=“图片地址”alt=“图像无法显示时的替代文字”title=“鼠标悬停文字” width=“图片宽度”height=“图片高度”/> 超链接 基本用法 <a href=“链接的地址”target=“从哪个窗口打开”>链接的文字或图像说明</a> 图像链接 <a href=“链接的地址”tarret=“从哪个窗口打开”><img src=“路径”alt=“”</a> 文本链接 <a href=“链接的地址”tarret=“从哪个窗口打开”>文字说明</a> 页面间链接 锚链接 <a name=“锚点”>目标</a> <a href=“#锚点”>链接内容</a> 功能性链接 （电子邮件，qq MSN） 列表 有序列表 <ol type=“样式”> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> 无序列表 <ul><li>第一项</li><li>第二项</li> </ul> 自定义列表 <dl> <dt>标题一<dt> <dd>第一项</dd> <dd>第二项</dd> <dt>标题二</dt> <dd>第一项</dd> <dd>第二项</dd></dl> 创建表格 (<table>标签的border边框属性，指定边框的宽度。）<table> <tr> <th>1行1列标题</th><th>1行2列标题</th><th>1行3列标题</th> </th> <tr> <td>1行1列的单元格</td><td>…………</td> </tr></table> 表格跨列 <table> <tr> <td colspan=“所跨的列数”>单元格内容</td> </tr> </table> 表格跨行 <table> <tr> <td rowspan=“所跨的行数”>单元格内容</td> </tr> </table> video 的用法 <video src=“视频路径” contorls=“提供一些按钮”></video> <video controls> autoplay(自由播放)<source src=“video/video.wem”><source src=“video/video.mp4”></video> audio 的用法 <aideo controls> autoplay(自由播放)<source src=“aideo/aideo.ogg”><source src=“aideo/aideo.mp3”></audio> HTML的结构元素<header> 网页头部article(独立的文章部分)aside(相关内容 用于侧边栏)nav(导航 辅助内容)</header><section> 网页主体部</section><footer> 网页底部</footer> <iframe> 框架 <iframe src=“引用页面地址” name=“mo” width=“宽”hight=“高”/> <a href=“引用另一页面地址” target=“mo”>……</iframe>表单 <form method=“提交方式”action=“提交地址”> 姓名：<input type=“text” name=“gan”/> 密码：<input type=“possword” name=“pass” /> 单选按钮 （radio） value=“男”checked/>男 (checked 默认选项) <input type=“radio”name=“gan” value=“男”/>男 <input type=“radio”name=“gan” value=“女”/>女 复选按钮 (checked) <input type=“checkbox”name=“gan”value=“sports”>运动/> 提交按钮 提交到指定的URL <input type=“submit”name=“”value=“提交”/> <input type=“image”src=“”/> 普通提交 <input type=“button”name=“”value=“提交”/> 重置按钮 (reset) <input type=“reset”name=“”value=“重置”/> 邮箱 （email） <input type=“email”name=“”/> 网址 (url) <input type=“url”name=“”/> 数字 （number） <input type=“number”name=“”min=“最小值”max=“最大值”step=“数字间隔”/> 滑块 （range） <input type=“range”name=“”min=“最小值”max=“最大值”step=“数字间隔”/> 搜索框 （search） <input type=“search”name=“”/> 隐藏域 （hidden） <input type=“hidden”value=“”name=“”/> 列表框 （select）(selected 属于该选项默认值) <select name=“列表名称”size=“行数”> <option value=“可选项的值”>内容</option> <option value=“ ”selected>……</option> </select> 文本域 （file 用于上传的操作，文件，图片等） <form method=“提交方式”action=“引用地址”enctype=“multipart/form-data”> <input type=“file”name=“ ”/> <input type=“snbmit”name=“”valu=“上传”/> </form> 多行文本域 （textarea） <textarea name=“”cols=“显示的列数”rows=“显示的行数” 文本内容 </textarea> readonly 只读 disabled 禁用 表单初级验方法 一种提示 （pleceholder） <input type=“ ”name=“”placeholder=“提示内容”/> 内容不能为空 (required) <input type=“” name=“”required/> 是否与自定义的正则表达式相匹配 （pattern） <input type=“”name=“”required pattern=“表达式” \s 任意的空白符号 \S 非任意的空白符号 \d 任意的一个数字符号，等价于【0-9】 \D 任意的一个非数字符号，等价于【^0-9】 \w 匹配一个数字、下划线或符号，等价于【a-z A-Z】 \W 匹配一个非个字符号，等价于【^a-z A-Z】 .除了换行符号之外的任意符号 {n} 匹配前一项N次 {n，m} 匹配前一项至少n次，至多m次 * 匹配前一项0次或者多次 + 匹配前一项1次或者多次 ？匹配前一项0次或者1次css的基本语法结构 （选择器）h1{（属性）font-size:（值）12px; color:red; } <style>在html中直接写 引入css样式的方法： 行内样式：（直接使用style属性设置css样式） <p style=“font-size：14px； color：green；”>直接在html标签中设置样式</p> 内部样式表：（把css代码写在<head>的<style>标签中，与html内容在同一个文件中。） 外部样式表： 一：链接外部样式表<head> rel(指的是页面中使用这个外接样式表) type(文件类型是样式表) <link href=“引用文件所在位置”rel=“stylesheet”type=“text/css”/></head> 二：导入外部样式表<style> @import（表示导入文件） @import url(样式文件所在位置) </style> 样式优先级：行内样式>内部样式表>外部样式表 基本选择器1.标签选择器p{font-size：16px；}2.类选择器.gan{font-size:16px;} class=“gan”(类名称）3.ID选择器#gan{font-size:16px;} id=“gan”(id名称)选择器优先级：ID选择器>class类选择器>标签选择器 高级选择器层次 后代选择器 E F （所有E元素后代中的F元素被选中） 子选择器 E>F (E元素的下一代F元素被选中) 相邻兄弟选择器E+F （E元素相邻的后一个元素F元素被选中） 通用兄弟选择器E~F （E元素后的所有兄弟被选中） 2.结构伪类选择器 E：first-child父元素的第一个子元素E E：last-child父元素的最后一个子元素E E F：nth-child（n）父元素的第n个子元素F 根据类型 E：first-of-type父元素中具有指定类型的第一个元素E E：last-of-type 父元素中具有指定类型的最后一个元素E E F：nth-of-type父元素中具有指定类型的第n个元素F3.属性选择器 E【attr】选择具有属性attr的 E【attr=val】选择属性attr=val属性值的必须一致 E【attr^=val】 以属性值val开头的 E【attr$=val】 以属性值val结尾的 E【attr*=val】字符串val与属性值中的任意位置先匹配五、美化页面 1.设置字体类型 font-family font-family：隶书； 2.设置字体大小 font-sizefont-size：12px； 3 设置字体风格 font-style normal（标准） italic（斜体字体样式） oblique（倾斜字体样式）font-style：italic； 4 设置字体粗细 font-weight normal（标准 400） bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）font-weight：bolder； 5 字体属性 （顺序 风格-粗细-大小-类型） 网页文本 1. 设置文本颜色 color 2. 设置水平对齐方式 text-alignleft（排列在左侧，默认值）right（排列在右边）center（排列在中间）justify（实现两端对齐文本效果） 3. 首行缩进 text-indent 4.文本行高 line-height 5.文本的装饰 text-decorationnone（默认值）underline（文本下划线）overline（文本上划线）line-through（文本删除线） 6.垂直对齐方式 vertical-align（设置文本于图片的居中对齐，此时的值为middle） 7.文本阴影 test-shodow可叠加 test-shodow：color x轴位移（x-offset） y轴位移（y-offset）模糊半径（blur-radiu） 超链接伪类 a：link 单击访问前的超链接样式 a：visited 点击访问后的超链接样式 a：hover 鼠标悬浮超链接样式 a：active 点击未释放超链接样式列表样式List-style-type:none\disc\circle\square\decimal简写：list-style表示全部背景样式一、背景属性1.背景颜色：background-color2.背景图像：background-image1.>背景图像2.>背景重复方式：backgrond-repeat：（1）repeat（2）no-repeat（3）repeat-x（4）repeat-y3.背景定位：background-position{12px 12px; -12px -12px;30% 60%; 80% 50%;right top;~}背景的简写方式：position: #c00 url() 205px 50px no-repeaet;4.背景尺寸：1.>auto默认，原样2.>percentage百分数3.>contain图片正好适应自定义的辈子背景区域4.>cover放大填充5.CSS渐变1.>线性渐变linear-gradient(to top,red,green);2.>径向渐变redial-gradient(……)；第六章---盒子模型一、盒子模型 1、边框1.>border-color:上右下左、上下左右、上 左右 下2.>border-width：同上3.>border-style: none;hidden;dotted;dashed;solid;double;…… 简写方式：eg:border:1px solid black; 2、内边距-padding 3、外边距-margin设置方法：上右下左、上下左右、上 左右 下 使用margin：0 auto；的条件：1.块元素 2.设置了固定宽度二、盒子尺寸：border-box:内容的宽度或高度content：border+padding+margin+height/width三、圆角边框：border-radius上右下左、上下左右、两对角1>圆形：块元素、宽高一致、圆角半径为宽高一半或50%2>半圆形：eg：上半圆border-radius：50% 50% 0 0 ；同理3>扇形：亦是如此，border-radius：50% 0 0 0 ；三同一不同：宽高圆角半径一致；取值不同四、盒子阴影：box-shadow：10px 10px 10px #06c; box-shadow: inset 10px 10px 10px #06c;第七章、浮动标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列display （html标签的显示方式）block （块级元素，该元素前后会带有 换位符） inline （行内元素，该元素前后没有 换位符）inline-block （行内块元素，该元素既具有行内元素的特性，也具有块元素的特性）(可以让元素排在一行，并且支持宽度和高度，添加该属性在标准文档流中，不需要清楚浮动）none （该元素不会被显示）浮动：脱离文档流并向左/向右浮动，知道碰到父元素或另一个浮动元素float 属性定义网页元素在哪个方向浮动。（可以让元素排在一行，并且支持宽度和高度，可以决定排列方向）left（左） fight（右） none（默认值 不浮动）清除浮动 （clear属性）left（在左侧不允许浮动元素）right（在右侧不允许浮动元素）both（在左，右两侧不允许出现浮动元素）none（默认值允许浮动元素出现在两侧）解决父级边框塌陷的方法1.浮动元素后面加空div2.设置父元素的高度3.父级添加overf属性（visible 默认值，内容不会修剪，会呈现在盒子外）（hidden 内容会修剪，其余内容不可见）（scroll 内容会修剪，浏览器会显示滚动条 ）（auto 内容会修剪，当内容溢出的高度时才会显示滚动条，底部的滚动条只有在x方向出现内容溢出时，才会显示）4.父级添加伪类aftereg. .a：after{ content：“”；}/*在clear类后面添加内容为空/*第八章定位网页元素 position（定位） static （默认值，没有定位，元素按照标准文档流进行布局） relative （相对定位）相对定位的特性相对于自己的初始位置来定位元素位置发生偏移后，它原来的位置会被保留下来层级提高，可以把标准文档流中的元素及浮动元素盖在下边相对定位的使用场景相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量 absolute （绝对定位）绝对定位的特性绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位元素位置发生偏移后，原来的位置不会被保留层级提高，可以把标准文档流中的元素及浮动元素盖在下边设置绝对定位的元素脱离文档流绝对定位的使用场景一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景 rixed （固定定位）固定定位的特性相对浏览器窗口来定位偏移量不会随滚动条的移动而移动固定定位的使用场景一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等 z-index （层叠） 透明度 opacity:x (0--1）值越小越透明 filter：alpha（opacity=x） （0--100） 值越小越透明阅读全文
0 0
- HTML总结 HTML详细介绍重要知识点
- html重要知识点总结
- HTML重要标签总结
- HTML知识点总结
- html知识点总结
- HTML基本知识点总结
- html知识点总结积累
- html+css知识点总结
- html知识点总结积累
- html知识点总结
- html知识点总结(二)
- Html-知识点总结
- HTML常用知识点总结
- HTML知识点总结
- HTML、CSS知识点总结。
- HTML知识点总结
- html知识点总结
- HTML知识点总结
- Spring boot和MyBatis的整合
- ATECC508A芯片开发笔记（八）：ECDH算法配置方法、执行过程及实现原理
- leetCode-Third Maximum Number
- GC常用算法
- java异常
- HTML总结 HTML详细介绍重要知识点
- 关于Presentation Error的一点经验
- 0-1背包问题从复杂到简单的优化历程
- LeetCode#1-TwoSum
- PBR渲染原理
- 【Scikit-Learn 中文文档】神经网络模块（监督的）- 监督学习
- spring注解
- java异常2
- 12.集合框架--Collection、List、Set、Map集合
