美文网首页
html相关笔记

html相关笔记

作者: 地上最萌程序兔 | 来源:发表于2017-07-31 13:02 被阅读0次

    <em> 斜体

    <q> 双引号(并不是单纯的符号 为了体现引用语义)

    <blockquoke> 引用段落

    浏览器对<blockquote>标签的解析是缩进样式。如下图所示:

    空格 &nbsp;

    <address>标签 也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份  不能被包在<p>中

    <code> 单行代码

    <pre> 代码段

    <ul> 列表 ·

    <ol> 有序列表 1. 2.


    表格

    <table summary=“表格简介文字”>

    <caption>表格标题</


    超链接相关

    发邮件给📩

    注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。


    表单

    多行文本框

    <textarea rows="行数"cols="列数">文本</textarea>

    注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。


    Input  type 汇总

    type="radio"时,控件为单选框

    type="checkbox"时,控件为复选框

    type="submit"时,控件为提交按钮

    type="reset"时,重置按钮

    type="text|password"

    单选复选 checked

    <select>下拉框

    multiple="multiple" 下拉框可按【ctrl】多选

    下拉 selected

    <label>

    <label for="控件ID名称"> 点击label可控制id控件


    css

    因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式

    <span style="color:pink">内容里的  大于  <style type="text/css">头部    大于   外部文件引入

    但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,代码在...代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。

    🍓<style>

    🍓<link>

    link的外部生效 离得近!!!


    选择器

    css样式编辑引用

    🍓<span> span{....} 所有span控件

    🍓class ="myStyle" .myStyle{.....}

    🍓id ="myStyle" #myStyle{.....}

    🍓*{} 所有控件

    子选择器&后代选择器

    三年级时,<span>我还是一个<span>胆小如鼠<span/>的小女孩</span>

    子选择器:.first>span{border:1px solid red;}

    后代选择器:.first span{border:1px solid red;}

    总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    a:hover{ color:red; font-size:20px; }   hover鼠标滑过样式

    优先级问题

    🍓<>标签的权值为1

    🍓class类选择符的权值为10

    🍓ID选择符的权值最高为100

    🍓 !important最高

    浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。(用户设置无用 会影响用户体验)


    文字排版

    font-family:"Microsoft Yahei"  用英文兼容性更好。

    font-weight 粗细(bold)

    font-style 样式 italic

    text-decoration 字体修饰 (下划线underline;删除线line-through)

    段落排版

    缩进 text-indent:2em文字两倍大小 

    行高  line-height:2em

    字母间距 letter-spacing:50px   (中英文所有)

    单词间距 word-spacing:50px      (不能识别中文词 所以中文没有间距)

    对齐方式

    text-align:center left right


    元素分类

    块级元素

    特点:

    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

    2、元素的高度、宽度、行高以及顶和底边距都可设置

    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    a{display:block;}  //将内联元素a转换为块状元素,从而使a元素具有块状元素特点。

    块作为盒模型可以调节padding 和margin

    内联元素

    特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度及顶部和底部边距不可设置

    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

    display:inline //转内联元素

    内联元素间存在间距

    inline-block 元素特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度、行高以及顶和底边距都可设置

    盒模型

    边框

    1、border-style(边框样式)常见样式有:

    dashed(虚线)| dotted(点线)| solid(实线)。

    2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

    border-color:#888;//前面的井号不要忘掉。

    3、border-width(边框宽度)中的宽度也可以设置为:

    thin | medium | thick(但不是很常用),最常还是用象素(px)

    顺序 宽度 样式 颜色  border:20px dotted #879;

    上下左右 border-top|bottom|right|left

    上、右、下、左(顺时针)。如下代码:

    padding:20px 10px 15px 30px;

    如果上、右、下、左的填充都为10px;可以这么写

    div{padding:10px;}

    如果上下填充一样为10px,左右一样为20px,可以这么写:

    div{padding:10px 20px;}

    位置 定位

    float:left 左对齐

    1、绝对定位(position: absolute)

    2、相对定位(position: relative)

    3、固定定位(position: fixed)

    各种缩写

    颜色代码简写:color:#336699       简写 #369

    font-size 为 xpx ,那么 1em = xpx;即几em为几倍的font-size

    p{font-size:12px;text-indent:2em;} 即p缩进2个字符

    水平居中

    定宽

    margin:20px auto; 即距离两边都auto。即实现居中。

    不定宽

    1. 先将要居中内容加入到<table>;     然后仿照定宽方式用margin可设置

    2. 先display:inline (变为行内元素)   然后可用text-align:center;来设置

    3.  通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

    垂直居中

    单行

    1.设置父元素的height和line-height高度一致

    hight=line-height


    多行

    1. 表格内<table> 用于<br><tr>

    vertical-align:middle;

    2.先用display:table-cell; 将块级元素转为table的cell

    然后进行第一种方法的操作。

    变为块元素

    display:absolute;

    遍可设定width等

    相关文章

      网友评论

          本文标题:html相关笔记

          本文链接:https://www.haomeiwen.com/subject/klzllxtx.html