HTML篇

最新推荐文章于 2024-09-11 20:08:48 发布

dandan哥

最新推荐文章于 2024-09-11 20:08:48 发布

阅读量175

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/php_dandan/article/details/82051700

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

因为PHP擅长的是web开发。所以HTML也是phper需要了解的.

                        HTML知识点
                        基础篇
快捷键
    ctrl+A 全选 ctrl+s 保存 ctrl+c复制 ctrl+v保存
    ctrl+o 打开 ctrl+w 关闭 ctrl+p打印 ctrl+n新建
PS中快捷键
    ctrl+ "+" 放大 ctrl+ "-" 缩小 ctrl+r 显示/隐藏标尺
    ctrl+h 隐藏参考线 ctrl+d 取消选区 
文件夹起名字要求
    数字、字母、下划线，不允许使用汉字，不允许用数字开头
三原色：
    红（red）    绿（green）    蓝（blue）
    16进制：0-9和a-f随机组合3位或者6位，比如（#fof  #abb123）
    rgb(0-255,0-255,0-255)
图像的格式：
    JPG   PNG   GIF JPEG BMP
建站点
    新建文件夹：
            文件夹（HTML）网页
            文件夹（css）样式
            文件夹（images）图片
HTML网页的基本格式

                <!DOCTYPE html>
                <html>
                <head>
                    <title>网页的名字</title>
                </head>
                <body>网页的内容</body>
                </html>

标签的基本语法
             单标签：<标签名 属性="属性值">   例子：`<img src="">`
             双标签：<标签名 属性="属性值">内容</标签名>   例子`<p style="color:red;">文字</p>`
列表
    无序列表

            <ul>
                <li></li>
            </ul>

    无序列表的属性：type（类型）
            属性值：square(小正方形)  disc(实心圆，是默认值)  circle（空心圆）
    有序列表

            <ol>
                <li></li>
            </ol>

        有序列表的属性：type（类型）  reversed（倒序显示）  start（开始）
                type属性值："1"(阿拉伯数字，是默认值) "a"（a-z）  "A"（A-Z） "Ⅰ"（罗马数字ⅠⅡⅢⅣⅤ）

                reversed（倒序显示）

                    例子

                            <ol type="A" reversed>
                                <li>文字</li>
                                <li>文字</li>
                                <li>文字</li>
                            </ol>

                    显示结果为
                        C 文字
                        B 文字
                        A 文字


                start（从当前开始顺序显示，或者倒序显示）

                    例子1

                            <ol type="A" statr="B">
                                <li>文字</li>
                                <li>文字</li>
                                <li>文字</li>
                                <li>文字</li>
                             </ol>

                            <ol type="A" start="B" reversed>
                                <li>文字</li>
                                <li>文字</li>
                                <li>文字</li>
                                <li>文字</li>
                                <li>文字</li>
                            </ol>

            <dl>
                <dt></dt>
                <dd></dd>
            </dl>

        注意：dt和dd是同级，常用的格式是：dt放图，dd放字。一个自定义列表中，可以放很多个dd，但是只能放1个dt。
超链接：<a></a> 一对一  ----  文字会变成蓝色，并且添加下划线
    <a href="#">文字</a>   # 代表的是空链接
    属性：引入地址  href      目标打开方式 target="_self"原窗口    _blank 新窗口

表格：表格中的内容默认情况下 --- 水平居左  垂直居中
    table 表格
        属性：border边框  width宽度   height高度  align对齐方式（left/center/right）
            bgcolor背景颜色    cellspacing 单元格间距  cellpadding单元格边距
    tr  行
        属性：align对齐方式（left/center/right）   bgcolor背景颜色
    td  单元格、列
        属性：align对齐方式（left/center/right）   bgcolor背景颜色
            colspan 水平合并（合并的多列）
            例子：colspan="5" 删掉本行(tr)中的4个列（td）
            rowspan 垂直合并（合并的多行）
            例子：rowspan="5" 删掉除过本行（tr）往下4个行（tr）每行的一个列（td）

    细线表格的制作步骤：
        1、给table设置边框border为0（可以不用写border）
        2、给table设置背景色bgcolor，表格的背景色就是线的颜色
        3、给每个tr设置背景色
        4、给table设置单元格间距为1---- cellspacing="1"
表单
    表单：用于显示，收集信息，并把信息提交给服务器
    表单的结构：
            <form>
                <input type="...">（输入标签）
                <selcet>（下拉菜单）
                    <option>内容1</option>
                    <option selected>内容2</option>
                    <option>内容3</option>
                <select>
                <textarea>（文本域，用于影评等）

                </textarea>
            </form>
    表单的属性：action（服务器地址）  name（表单名称） target（目标打开方式）  method（提交方式）
    表单属性的属性值：  target（_blank新窗口打开    _self原窗口打开，是默认值）   method（post隐式提交，提交数据时，内容不会显示在地址栏，安全性高，提交数据的大小也没有限制  get明文提交，提交数据时会显示在地址栏，安全性低，提交数据大小有限制，最大为2KB）
                注意：如果有文件需要上传服务器，method（提交方式）必须改为"post"
    输入标签
        <input type="...">（表单控件，放在form中）
    输入标签的属性：type（类型） name（名称） value赋值 checked默认选中（用于，协议等） placeholder光标获取
    输入标签中type的属性值：
                text（文本框）
                password（密码框）
                radio（单选框，同一组单选框中，必须给一个name，而且name的值要相同，不然，无法单选）
                checkbox（多选框）
                file（文件域）
                image（图像域，具有提交功能）
                submit（提交按钮）
                reset（重置按钮）
                button（普通按钮）
                tel（电话）
                email（邮箱）
                url（网址）
                number（数值，  max最大  min最小   取范围）
                date（日期）
                datetime（世界时间，UTC时间）
                datetime-local（本地时间）
                color（颜色）
                week（第几周）
                month（几月，不是第几个月）
                range（滑动轴）
                                **css篇**
三种样式表（三种样式表可以搭配使用）：
        行内样式：直接在标签内部写 style="属性:属性值;"   例子<p style="color:red;">文字</p>
        内嵌样式：在head之间写一个双标签<style></style>,在style之间写CSS
        外部样式：新建一个CSS样式表，再用link导入
三种样式表的优先级： 行内样式>内嵌样式>外部样式
文字属性
    font-size文字大小 网页中，正文（12px）标题（14px）
    font-color文字颜色
    font-family文字字体 黑体、宋体等
    font-style字体倾斜（italic倾斜 normal正常字体）   
    font-weight文字加粗（bold/bolder加粗  noamal正常字体） 
    text-decoration文本修饰（underline下划线   overline上划线 line-through删除线  none去掉下划线）
    text-align文本对齐（left左 center中 right右）
    text-indent文本缩进
    line-height行高
背景属性
    background-color背景颜色
    background-image:url(../images/a.png);背景图片
    background-repeat背景图片重复（repeat默认值 no-repeat不重复 repeat-x水平方向重复 repeat-y垂直方向重复）
    background-position背景图片位置  先水平（left/center/right，像素）  后垂直（top上/center中/bottom下，像素）
    background-size背景图片的尺寸  先水平（百分数，像素）  后垂直（百分数，像素）
列表属性
    list-style：none；去掉项目符号

浮动： float：left/right/none；
                                **div篇**

元素分类：
1：行内元素：在一行内显示，元素前后没有换行效果，不会自动换行，在css添加width和height，不会起作用
2：块元素：一个标签独占一行，元素前后带有换行效果，在css中添加任何属性都起作用
3：可变元素：button/input

行内元素例子 b / i / u / img / a / em / strong / span
块元素例子： h1-h6 /p / ul / ol / li / dl / dt / dd / table / form / div

dandan哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML篇

因为PHP擅长的是web开发。所以HTML也是phper需要了解的.HTML知识点基础篇快捷键 ctrl+A 全选 ctrl+s 保存 ctrl+c复制 ctrl+v保存 ctrl+o 打开 ctrl+w 关闭 ctrl+p打印 ctrl+n新建 PS中快捷键 ctrl+ “+” 放大 ctrl+ “-” 缩小 c...
复制链接

扫一扫

专栏目录