HTML 入门

html

Hypertext Markup Language 超文本标记语言 是网页的标签

F5:刷新界面 F12:浏览界面 ctrl+s:保存 tab:缩进(尽量不要用空格键) ctrl+z:撤销/后退 shift+enter:
ctrl+r :ps 调出标尺 f8:调出信息版面(尺寸) 空格+点击图:手行移动图 ctrl+D 取消选区

网页的基本结构:

网页标题 主体 ## HTML 标签

段落标签:


属性:【align】对齐方式 属性值:left/center/right 默认居左
标题标签: h1-h6 h1文字最大 h6文字最小 n可取最大值是6
属性:【align】对齐方式 默认居左 属性值:left/center/right
无序列表标签:
    属性:type 设置项目符号类型 属性值:circle/disc/square
    默认是 disc【实心圆】 ul
    一层嵌套的ul项目符号是 circle【空心圆】
    二层嵌套的ul项目符号是square【方块】
    列表项标签:

    • 基本格式:

      • 列表项


      有序列表标签:
        属性:type 设置排序的方式 属性值:1/A/a/I/i start设置起始值 一定数字
        默认:Type=“ 1” start=“1”
        列表项标签:

      1. 基本格式:

        1. 列表项


        定义列表标签:

        列表项标签:

        基本格式:

        列表项
        描述项


        超链接标签:
        文字有默认的颜色,所以需单独设置其颜色,其他不设置的时候,就跟父级元素设置一样。
        属性:href 设置链接路径/目标地址 href=“login.html”
        属性:target 设置打开新界面的方式
        target属性值是:_self [在当前界面中打开,原来的界面不存在了] 默认设置
        _blank [在新的界面中打开,原来的界面还存在]
        _top
        _parent
        表格标签:

        属性:
        Width: 设置表格的宽度
        Height:设置表格的高度
        cellpadding:设置文字距离单元格的距离
        cellspacing:设置单元格与单元格之间的距离
        background:设置table的背景图片
        bordercolor:设置table边框颜色
        bgcolor: 设置table的背景颜色
        border: 设置table的边框的宽度
        align: 设置table水平对齐方式
        行标签:
        属性:
        align: 设置水平对齐方式 属性值:left/right/center
        Valign:设置垂直对齐方式
        属性值:top【上】/ bottom【下】/middle【垂直居中】
        Bordercolor:设置行的边框颜色
        Bgcolor: 设置行背景颜色
        Height 设置行高
        单元格标签:
        属性:
        background 设置单元格的背景图片
        Bordercolor 设置单元格边框颜色
        Bgcolor 设置单元格背景颜色
        Align 设置单元格水平对齐方式
        Valign 设置单元格垂直对齐方式
        Height 设置单元格的高度
        Width 设置单元格的宽度
        Rowspan 合并单元格垂直跨度 合并行
        Colspan 合并单元格水平跨度 合并列
        表格头部标签:
        图标标签:
        属性:src=”图片的链接路径”
        alt=”图片的替代文字”
        border:图片的边框
        width:图片的宽度
        height:图片的高度
        align: 设置图片对齐方式
        属性值:middle设置居中,但是不起作用 left/middle/right
        ,page 页面
        Homepage 主页
        Website 网站
        表单标签:
        属性:action: 提交路径/位置
        method 设置提交的方式 其属性有:get[获取数据]/post[传送数据]

        1, text 文本框
        Value 设置默认文本
        2,password 密码输入框 Value 设置默认密码
        3,radio 单选按钮 8
        name 必须有的 分组
        checked=“checked” 设置默认被选中
        4, checkbox 复选框
        name 可有可无 分组
        checked=“checked” 设置默认被选中
        5,file 文件域
        6,submit 提交按钮 Value 设置按钮文字
        7,reset 重置按钮 Value 设置按钮文字 默认的不能被清空
        8,button 普通按钮 Value 设置按钮文字
        9,image 图片域 src 设置图片域的图片路径
        10 hidden 隐藏域 内容不显示
        14,下拉菜单标签:
        菜单项标签: selected=” selected” 设置默认值
        15,文本域标签:
        属性:cols 列(每行字数) rows 行
        16,&nbsp 空格 Enter+shift

        17,水平线标签:

        属性:color 设置水平线的颜色
        Size 设置水平线的高度
        Width 设置水平线的宽度
        Align 设置水平线的对齐方式
        18,1选择需要连接的文字或者图片
        2,在属性栏里点击刷新按钮
        3,在超连接的位置输入shift+3即可输入“#
        4,点击代码页

        html文档的注释方式 <!—注释内容–>
        Css文档的注释方式 /--------注释内容-------/
        四种选择器:
        1>标签选择器
        2>类别选择器 声明:.class_name 调用:
        3>id选择器 声明:#id_name 调用:


        伪类选择器 针对超级链接标签:
        a:link 未访问状态(正常)
        a:visited 访问过后
        a:hover 鼠标滑过(鼠标经过)
        a:active 点击的瞬间(鼠标按下去)
        四种样式
        1>行内样式:

        文字内容


        2>内部样式:


        正文部分

        3>外部样式

        正文部分

        4>导入样式 ## 样式的优先级 行内样式> 内嵌样式>外部样式>导入样式 ## 选择器的优先级 Id选择器>类别选择器>标签/标记选择器、伪类选择器 ## 文字属性 属性: 1>Color 文字颜色 #ff0000 红 #00ff00 绿色 #0000ff 蓝色 #000000 黑色 #ffffff 白色 #666666 灰色 2>Font-size 文字大小 3>Font-family 文字字体 4>Font-weight 文字粗细 num(100-900)/bold/bolder/lighter/normal(正常字体) 5>Font-style 文字样式 italic(斜)/normal(正常)/oblique(偏斜:居于斜和正常之间 的微斜) ## 段落属性 属性: 1> text-decoration 文字的修饰 属性值:none(无线)/over-line(上)/line-through(删除线)/ under-line(下划线) 2>text-indent 文字首行缩进 属性值:2em(首行缩进2个字符) 、20px 3>line-height 文字行高 属性值:150%、 30px; 4>text-align 文字的对齐方式 属性值:left/center/right/justify(两端对齐) 5>letter-spacing 文字间距 属性值:10px; ## 背景属性 属性: 1.Background-color 背景颜色 #ff0000红色 #0000ff 蓝色 #00ff00 绿色 #666666 灰色 #000000 黑色 #ffffff 白色 2.Background-image 背景图片 url("图片链接路径"); 3.Background-repeat 背景重复 属性值:repeat(默认) repeat-x水平方向平铺 repeat-y 垂直平铺 no-repeat 不平铺 4.Background-position 背景位置 1>文字设置 水平:left center right 垂直:top center bottom 2>数字+单位 水平:250px 垂直:250px 5.background-attachment 背景是否滚动 属性值:scroll(默认)滚动 fixed 固定 6.复合属性:background 复合以上5种属性 Background: red url("girl.jpg") no-repeat center top fixed 颜色 背景图片 重复 背景图片位置 是否滚动 ## 盒子模型
        属性: Margin 外边距 Padding 内边距/内填充 Border 边框 Content 内容 盒模型中的宽和高:width height 1>margin:10px; 上下左右外边距都是10px Margin:10px 20px; 上下 左右 Margin:10px 20px 30px; 上 左右 下 Margin: 10px 20px 30px 40px; 上 右 下 左 Margin-top 上外边距 margin-left 左外边距 margin-bottom下外边距 margin-right 右外边距 2> Padding:10px; 上下左右内边距都是10px Padding:10px 20px; 上下 左右 Padding:10px 20px 30px; 上 左右 下 Padding: 10px 20px 30px 40px; 上 右 下 左 Padding-top 上内边距 Padding-left 左内边距 Padding-bottom下内边距 Padding-right 右内边距 3> Border 复合属性 (border-width border-color border-style)无顺序 Border-left-color 左边框颜色 Border-left-style 左边框样式 solid(实线)/dashed(虚线)/double(双实线) Border-left-width 左边框宽度 Border-left:2px solid #ff0000; Border-left-width Border-left-style Border-left-color Border-top 上边框 的复合属性 Border-bottom 下边框复合属性 Border-right 右边框复合属性 29,行内元素/行内标签 、 、 、、 、、 默认:display:inline; 特点:1,没有双边距 2,没有固定的宽高 3,能够在一行排列 4,行内元素可以嵌套行内元素,但是不能嵌套块级元素 块级元素

        、、

          1. 、 、
            、 、
            **特点**:1,有双边距 2,有固定的宽、高。 3,不能和其他块级或者行内元素同住一行 4,能嵌套行内元素和块级元素 默认:display:block; ## 浮动属性 Float 属性值:left(向左浮动)/right(向右浮动)/none(默认) ## 清除浮动属性 **clear 属性值**:left(清除左浮动)/right(清除右浮动)/both(左右都清除浮动)/none(默认) overflow 设置内容溢出 属性值: 1>auto 自动(内容的高于容器的高度,会出现滚动条,反之,则正常显示,没有滚动条) 2>visible 显示(内容的高于容器的高度,不会出现滚动条,但是内容会正常显示出来) 3>hidden 隐藏(内容的高于容器的高度,多余的文本不会显示,直接隐藏) 4>scroll 滚动(内容的高于容器的高度,则会出现滚动条,不高于时,也出现滚动条,只是没有滑块。) **,框架集标签:** cols="value,value,......." 从左到右的框架集 Rows="value,value,......." 从上到下的框架集 **框架标签**: 属性:src 找对应框架显示的网页路径 **css的嵌套写法**:.main p a{ css结构体} **Css的集群写法**:.main,.left,.center,.right{ height:156px;} ,**css样式的优先级** 1>行内样式大于所有外部和内部样式 (相同属性的设置) 2>关于内部样式和外部样式:谁离标签近用谁的样式(相同属性的设置) 3>用同一种样式(行内、外部、内部):谁离标签近,用谁的样式 例如:p{ color:red; color:green;}此时p标签的文字为绿色; 4>控制同一种样式:谁的范围详细,就用谁的样式 例如:

            文字

            div p{color:red; } div{color:green;} 此时p标签的文字颜色为:红色 **同一个标签同时调用2个类的格式为**:
            文字
            .aa{} .bb{}为声明的2个类的样式
          评论
          添加红包

          请填写红包祝福语或标题

          红包个数最小为10个

          红包金额最低5元

          当前余额3.43前往充值 >
          需支付:10.00
          成就一亿技术人!
          领取后你会自动成为博主和红包主的粉丝 规则
          hope_wisdom
          发出的红包
          实付
          使用余额支付
          点击重新获取
          扫码支付
          钱包余额 0

          抵扣说明:

          1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
          2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

          余额充值