前端复习笔记-html

最新推荐文章于 2024-09-24 10:17:01 发布

shenxingg

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量89

点赞数

分类专栏：前端三要素文章标签： html5 html

本文链接：https://blog.csdn.net/shenxingg/article/details/120511771

版权

前端三要素专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端三要素------html
用于网页结构搭建
语言：超文本标记语言/解释型标记语言
1. html结构
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8"> 编码UTF-8
                <meta name="viewport" content="width=device-width,initial-scale=1.0">适配设备像素
                <title>网页标题</title>
            </head>
            <body>
            </body>
        </html>
2. 标签
        不区分大小写
        单标签</br>
        双标签<head></head>
    元素
        标签+内容
        <h1>一级标题</h1>
        <div id="one">
            <div id="twe">块元素2</div>
        </div>
    属性
        位于开始标签中
        核心属性（通用，绝大多数标签都有的功能）
            id          唯一标识
            class       分类，可以重复
            title       悬浮提示
            style       添加css规则
        自有属性
            <img src="图片地址" alt="图片的替换输出 "></img>
            <a href="网址"   target="网页打开方式"></a>
    注释
        
3.块元素（块标签）
    特点：
        1) 独占一行空间（100%）
        2)高度默认为0，高度由内容决定
        3)可以指定宽高
        4)用来页面搭建
    元素：
    html4：div,body,p,ul>li,ol>li,dl>dt,h1~h7
    html5: header,footer,nav,section,article,aside,address.....
4.行内元素（行内标签）
    特点：
        1)行内与其他行内元素共享同一空间
        2)宽高都由内容决定
        3)无法指定宽高
        4)用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中
    元素：
        span, a,img,
        装饰性标签 strong,b,em,i,sub,sup...
5.功能标签（功能元素）
    1) a 超级链接
            href="跳转地址" 跳转到一个网页地址中
                相对路径：相对于当前代码所在文件的路径
                    ./    当前目录下
                    .//   当前目录下的上一级目录
                绝对路径：相对于基准点
                    linux操作系统根目录为基准点
                    /var/www/html   apache2部署目录
                锚点
                    1.定义锚点
                        <div id="top">顶部</div>
                    2.跳转
                        <a href="#top">跳转顶部</a>
            target=" "目标页面跳转方式
                _self   默认值，当前页面
                _blank 新页面
    2) img 图片
            src="图片地址"
                1.网络资源
                2.相对路径
                3.绝对路径
                4.base64格式值
            alt="" 图片找不到时候的文本替换
    3) table 表格
            tbody   表格体   (thead ,tfoot)
            tr      行
            td,th   列（容器）
                子标签可以为其他任意标签
            行中的列数在经过计算后应该是相同的
    4)form
        用来进行前后台数据交互（默认情况下，同步交互：JavaEE（jsp),nodejs(模板)，ajax异步交互
        前置技术：http协议
        form(action 后端处理接口，enctype表示编码方式, method请求方法)
            method取值
                get 用于查询操作，参数携带在url后面
                post 用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中
            enctype取值：
                application/x-www-form-urlencoded
                    查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...
                    schoolName=太原理工大学&userName=陈明
                multipart/form-data
                    用于表单中有附件提交的时候，二进制，无需进行编码
                text/plain
                    纯文本提交
        (1)input 输入框
            注意input（text、password、radio、checkbox）必须添加name属性，（radio、checkbox）必须添加value属性
            <input type="text">                 单行文本框
            <input type="password">             密码
            <input type="radio" value="">       单选框
            <input type="checkbox" value="">    复选框
            <input type="file">                 附件
            <input type="submit">               提交按钮
            <input type="reset">                重置按钮

            <input type="date">                 日期选择器(h5x新加)
        (2)textarea 多行文本
            <textarea name=""     cols=""列 rows=""行></textarea>
        (3)select 下拉菜单
            <select name="address">
                <option value="js">江苏</option>
                <option value="sx">山西</option>
            </select>
        (4)iframe   引用文档如：天气预报
            <iframe width="100%" height="300" frameborder="0"   scrolling="no" hspace="0" src=""></iframe>