前端html+css标签简介(可能就我自己看的懂-。-)
阅读原文时间:2023年07月09日阅读:2

标签集合

# html

文字标签:修改样式
    -<font></font>
    -属性:size:大小,范围1-7,大于7时默认7
           color:颜色,英文单词或者十六进制(editplus中有颜色工具)

注释标签:java注释有几种?3
    html注释:<!--   xxxxx此为注释   -->

标题标签:
    <h1></h1><h2></h2>...<h5></h5>
    <h1>标题一</h1>,可以自动换行,字体大小依次变小

水平线标签:<hr/>
    -属性:size:线的粗细
           color:线的颜色
    <hr size="5" color="blue"/>

特殊字符:转义:
    < : &lt;
    > : &gt;
    & : &amp;
    空格 : &nbsp;

列表标签:<dl></dl>:表示列表的范围
               <dt></dt>上层主内容
           <dd></dd>下层子内容
      <ol></ol>有序列表的范围
           <li></li>具体内容
      <ol type="a"></ol> type设置排序方式
      <ul></ul>无序列表范围
      <ul type="circle"></ul> type设置排序方式

图像标签:<img src="图片的路径"/>
    -src:图片的路径
    -width:图片的宽度
    -height:图片的高度
    -alt:显示图片上的文字,鼠标移到图片上停留片刻(有些浏览器不支持)

路径介绍:
    绝对路径:使用路径全名
    相对路径:1.从该html的同级目录的路径开始(同级或下层目录)
        2.用../回到上级目录出发(上层目录)

超链接标签:
    链接资源:<a href="链接路径">显示在页面上的内容</a>
    href:资源地址(#无效化)
    target:设置打开方式,默认在当前页面打开
        _blank:在新窗口打开
        _self:在当前页面打开
    定位资源:先定义一个位置
        <a name="example">ok</a>,回到该位置用链接
        引入标签pre,原样输出

表格标签:<table></table>:表格的范围
    tr:表格中的每一行;td:每一行的每一个单元格
    中有tr中有td:<tr><td></td></tr>
    属性:border:表格线的粗细
        bordercolor:表格线的颜色
        cellspacing:单元格之间的距离
        width和height:表格的大小
        align设置文字位置:left,center,right
    th:代替td并实现居中和加粗
    <caption></caption>:表格标题
    合并单元格:-rowspan:跨行
        -colspan:跨列 colspan="3"跨三列

表单标签:<form></form>:定义表单的范围,属性action提交数据,默认当前页面,属性method,get和post默认get,属性enctype,文件上传需用,下面每一项中要有属性:name
        输入项:<input type="类型"/>
        普通输入项:<input type="text"/>
        密码输入项:<input type="password"/>
        单选输入项:<input tye="radio"/>属性:name需一样,value,checked="checked"默认选中
        复选输入项:<input type="checkbox"/>属性:name需一样,value,checked="checked"默认选中
        文件输入项:<input type="file"/>
        下拉输入项:<select>
                <option value="1">1</option>
                <option value="2">2</option>
                ...
                </select>
                selected="selected"默认选中
        文本域:<textarea></textarea>属性cols(列),rows(行)
        隐藏项:<input type="hidden"/>
        提交按钮:<input type="submit"value="注册"/>
            <input type="image" src="图片路径"/>(图片提交)
        重置按钮:<input type="reset" value="重置"/>
        普通按钮:<input type="button" value="普通">

其他标签:<b></b>加粗
    <u></u>下划线
    <i></i>斜体
    <s></s>删除线
    <p></p>段落
    <pre></pre>原样输出
    <sub></sub>下标
    <sup></sup>上标
    <div></div>自动换行
    <span></span>在一行显示

头标签:<title></title>标题
    <meta name="keywords"content="关键字">搜索引擎
    <meta http-equiv="refresh" content="时间;url=地址">多少时间后跳转到该地址
    <base target="_blank">所有链接都在新窗口打开
    <link>引入外部文件

框架标签:<frameset></frameset>
    -rows:按行划分<frameset rows="80,*">分两部分,第一部分80
    -cols:按列划分
    <frame name=""src="">
    只有在没有body是能用

# css

1.直接在每个标签后加style

2.<style type="text/css">
    div{
        background-color:blue;
        }
 </style>

3.在style标签里导入css文件(有些浏览器不起作用)
    @import url(路径);

4.使用link引入外部文件
    <link rel="stylesheet" type="text/css" href="css文件的路径"/>

由上到下,从外到内,优先级低到高

标签选择器
    div{
        background-color:red;}
class选择器
    <div class="x">aa</div>
    .x{background:red;}
id选择器
    <div id="y">aa</div>
    #y{backgeound:red;}

style优先级大于id选择器优先级大于class选择器优先级大于标签选择器

扩展选择器:
    关联选择器div p{...}嵌套时使用
    组合选择器div,p{...}设置相同样式时使用
    伪元素选择器:css中一些定义好的样式
        a:link{background-color:red}
        :hover:active:visited

css盒子模型:
    边框:border:20px  soild  blue(大小,类型,颜色)
        top,bottom,left,right四种
    内边距:padding:20px
        上下左右分别设置
    外边距:margin:20px
        上下左右分别设置

css布局定位与漂浮:
    float:left和right放到对象左边或右边
    position:absolute:把对象从文档流拖出,可以用top,bottom等定位
        relative:不从文档流拖出,用top,bottom定位