html 初始

落爺英雄遲暮 提交于 2019-12-26 15:45:01

1.html  文档基本结构

HTML文档结构
        <html>
            <head></head>:head内放的内容不是给用户看的 是给浏览器去识别做相应操作的
            <body></body>:body内放的内容就是浏览器展示给用户看到的花里胡哨的页面
        </html>
head内常用标签
        title:定义网页标题
        style:内部支持直接写css代码
        link:引入外部的css文件
        script:
            1.内部可以直接编写js代码
            2.可以通过src属性引用外部js代码
        meta:
            name属性
                keywords
                description

2.html 标签分类:    1.双标签   2.自闭和标签

3.body内常用标签    

 

    body内常用标签
    
        你所看到的花里胡哨的页面 其实内部都是html代码 很丑很乱
    
        基本标签
            h1~h6:标题标签
            s:删除线
            b:加粗
            u:下划线
            i:斜体
            p:独占一行
            br:换行
            hr:分割线
        

        特殊符号
            &nbsp;      空格
            <p>a大于b     a &gt; b</p>
            <p>a小于b     a &lt; b</p>
            <p>a&b       a &amp; b</p>
            <p>人民币     &yen;10000000000</p>
            <p>版权标识   &copy;</p>
            <p>注册商标   &reg;</p>
    
        常用标签
            div  块儿级标签
            span  行内标签
            本身没有任何特殊意义
            但是这两个确实使用最多的 这两个标签是用来做前期的页面布局的
            
            
            img  图片标签
                src
                    1.可以写一个网站图片地址
                    2.还可以写本地的图片地址
                    3.url(自动朝该url发送get请求要数据)
                alt
                    当图片加载不出来的时候 默认展示的提示信息
                
                title
                    当鼠标悬浮在图片上的时候 展示的提示信息
                
                width,height
                    修改一个 另外一个会自动等比例缩放
                    如果两个都修改图片就会失真
                    
            
            a  链接标签
                href
                    1.放一个url
                        点击就会跳转到该url所对应的资源
                        
                target
                    控制是否在当前页跳转
                        默认是在当前页跳转
                            _self
                        新建页面跳转
                            _blank
                
                锚点功能
                    href不单单可以写url 也可以写另外一个a标签id值
                    点击就会跳转到该id值所对应的a标签所在的位置
                    
        
        标签应该具备的属性
            1.id属性:类似于身份证号  用来唯一标识当前html页面中的某一个标签
                在同一个html页面中 id值不能重复
            2.class属性:类似于面向对象的继承
                直接引用别的类的样式

        
        列表标签
            无序列表(较多)
                ul
                    li
                    只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
                    
            
            有序列表
                ol
                    li
            
            标题列表
                dl     
                    dt标题
                    dd内容
                    
        
        表格标签(******)
            展示网站数据的时候  一般情况下可以使用表格标签
            <table>
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            先表格标签 先写结构 然后写数据
            
            一个tr就是一行
            th和td之分   一个加粗一个不加粗  
            通常情况下表头用th,表单内容用td
            
            
            
        
        表单标签(*******)
            form标签
            获取用户输入(输入,选择,上传文件....)并且将数据打包发送给后端
            action参数
                用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
                三种写法:
                    1.不写 默认就是朝当前该页面所在的地址提交数据
                    2.全路径(https://www.baidu.com)
                    3.只写路径后缀(/index/) 
                    
            获取用户输入 input标签  该标签是一个行内标签
            
            input类似于前端的变形金刚
                type属性
                    text  普通文本
                    password  密文
                    date   日期
                    radio  多选一
                    checkbox  多选多
                        默认选种  checked="checked"
                        当标签的属性名和属性值相同的时候 可以只写属性名    
                        女<input type="radio" name="gender" checked="checked">
                        简写
                        女<input type="radio" name="gender" checked>
                    reset    重置
                    button   普通按钮
                    submit   触发form表单提交动作
                    file     获取文件
            select标签  下拉框
                一个个选项就是一个个option标签
                默认是单选的
                可以加一个multiple该成多选
                    <select name="" id="" multiple>
                        <option value="">新垣结衣</option>
                        <option value="">明老师</option>
                        <option value="">嫖老师</option>
                        <option value="">波老师</option>
                    </select>
                如何让option标签默认选中
                    加selected="selected"  
                    <select name="" id="" multiple>
                        <option value="" selected="selected">新垣结衣</option>
                        <option value="">明老师</option>
                        <option value="" selected>嫖老师</option>
                        <option value="">波老师</option>
                    </select>
                    
            textarea标签   获取大段文本
                
    
            label通常是配合input一起使用的
                for用来填写对应的input标签id值
                点击label标签内的内容 会自动让对应的input标签    聚焦
            
            
            
            能够触发form表单提交数据的按钮(******)
                <input type="submit">
                    可以通过value属性来指定按钮文本内容
                    <input type="submit" value="注册">
                <button>点我</button>
            
            
            input获取到的用户输入就类似于是字典的value
            input中的name属性就类似于是字典的key
            
            
        
            
            
                
        
    
    标签的分类2
        1.块儿级标签
            独占一行  h1~h6  p   br   hr   div 
            
            1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
            2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签
                如果嵌套了 没有问题 知识不符合html语法规范
                
            
            
            
        2.行内标签    u  s  i  b  span
            自身文本多大 就占多大
            行内标签内部不能嵌套块儿级标签和行内标签
            
        
        
    
    
    书写标签的时候 你只需要写标签的名字 之后tab键就可以自动补全
        emmet插件
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!