HTML基础语法

最新推荐文章于 2024-07-10 21:37:49 发布

Lucky_syw

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量238

点赞数

文章标签： java

本文链接：https://blog.csdn.net/sun_yi_wen/article/details/119359550

版权

html 超文本标记语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
</head>
<body>
    <!--
        标记语言中的注释:
    -->
    <!--
        1.html 超文本标记语言
        2.<!DOCTYPE html> html文件的版本类型声明
            <!DOCTYPE html> ->html5的版本声明
            一个html页面中必须在首行存在版本声明
        3.<meta charset="UTF-8"> 告诉浏览器使用哪一种字符编码格式来解析我页面中的内容
            保证一个文件的编码与解码格式保证统一不会出现乱码
        4.html标签的分类:
            单标签 |自闭和标签 : 在开始标签的最后结束  <meta charset="UTF-8"/>
            双标签 |闭合标签 : 有开始有结束    <title>基础语法</title>

        5.标签上可以添加属性
            开始标签上空格添加属性
            属性名 = '属性值'|"属性值"
            作用: 更完善的展示标签的作用
        6.标签的嵌套关系:
            父标签可以嵌套子标签
    -->
</body>
</html>

常用的标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
</head>
<body bgcolor="#f03725" background="images/xiaoxin.png">
    <!--
       常用的标签:
        1.<head> 页面的头部设置
            给浏览器看的一些设置信息
        2.<body> 定义一些给用户看的内容
            属性:
                bgcolor 背景颜色
                background 背景图片

                颜色的设置:
                    1)颜色的英文单词
                    2)颜色的十六进制值 #+6个字符
                    3)rgb颜色三原色  rgb(0~255,0~255,0~255)
        3.<title> 标题标签
            用户能够看到
            为与搜索引擎优化有好处
            用户收藏为书签的时候,title的内容作为书签名
            在一个html必须存在的标签

       4.p 标签
            段落标签
            语义化作用
            上下存在一块外边距(css样式),浏览器默认提供
            前后换行

      5.a标签
        超链接标签
        属性:
            href : 定义连接地址
                相对地址
                绝对地址 http://www.baidu.com
                必填属性
            title 当鼠标悬停在内容上时候,显示的提示字
            target 打开方式
                _self : 原页面打开
                _blank : 新页面打开

        特点:
            存在下划线
            连接未访问: 蓝色
            连接已访问: 紫色
            行内元素
            
       标签的分类:
            元素: 标签+内容
            行内元素 : 可以和其他元素同行展示
            块元素 : 前后换行,独占一行

    -->
    这是p标签之前:
    <p>这是一段文本</p>
    这是p标签之后:

    <a href="http://www.baidu.com" title="你百度一下,没有解决不了的问题" target="_blank">百度一下你就知道</a>
    <a href="yjxxt_html01.html">html01</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
</head>
<body bgcolor="#ff69b4">
    <!--
        img 图像标签
            属性:
                src 图片的路径
                    相对路径
                    绝对路径
                alt 当图片无法正常显示的时候,显示的提示字
                title 当鼠标悬停在内容上时候,显示的提示字

        span  帮助更方便的为元素添加样式
        div   块
            块元素
            前后换行
            内容正常显示
            可以前任任意标签元素(行内|块)
        路径:
            进入到某个路径下  /
            回到上一层路径    ../

        h1~h6标题标签
            根据权重不同,大小依次减小
            语义化

        所有的块元素都存在一个属性:
            align 水平对齐 方式
                left
                right
                center
                justify 两端对齐

        列表标签:
            无序列表
                ul
                li 列表项
                修改列表项标记 在ul标签上 type="square"实心方块  circle空心圆圈   默认desc实心圆圈
            有序列表
                ol
                li 列表项
                修改列表项标记 在ol标签上 type-> 1 a A i I

           列表可以嵌套:
                有序嵌套无序
                无序嵌套有序
                无序嵌套无序
                有序嵌套有序

          注意:
            所有的内容在列表中必须定义在列表项中
            ul|ol标签中直接子元素只能包含li,li中可以包含任意内容
            块元素中可以包含任意内容(普通文本,其他块元素,其他行内元素)
            行内元素中可以包含任意内容(普通文本,其他行内元素)
    -->
    <img src="images/12-19112Q5012M19.jpg" alt="" title="邮...">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf1.png" alt="网络不好..加载失败..">
    <p align="justify">
        美丽的<span style="color: blue">蓝</span>精灵【郎平回应是否继续执教：相信年轻一代的教练】中国女排总教练郎平今天接受采访时回应有关“不再执教”的问题。她表示：（教练人选）会由排球运动管理中心大家综合意见来推荐，相信年轻一nihyaohahahha代的教练。排球事业是一代接一代的，是一直向前走的。
        【郎平回应是否继续执教：相信年轻一代的教练】中国女排总教练郎平今天接受采访时回应有关“不再执教”的问题。她表示：（教练人选）会由排球运动管理中心大家综合意见来推荐，相信年轻一代的教练。排球事业是一代接一代的，是一直向前走的。
    </p>
    div之前
    <div>我是一个可爱的div</div>
    <h1 align="right">一级标题</h1>
    <h3 align="center">三级标题</h3>
    <h6 align="justify">六级标题</h6>

    <h3>我爱的吃的水果</h3>
    <ul type="circle">
        <li>车厘子</li>
        <li>草莓</li>
        <li>提子</li>
        <li>
            <ol>
                <li>杨桃</li>
                <li>樱桃</li>
                <li>水蜜桃</li>
            </ol>
        </li>
    </ul>

    <h3>我最不爱吃的事物</h3>
    <ol type="I">
        <li>香菜</li>
        <li>芹菜</li>
        <li>茼蒿</li>
        <li>苦瓜</li>
    </ol>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--
        表格:
            table 表格标签
            tr 行
            th 表格头单元格   居中加粗
            td 表格体单元格


            属性样式:
                border边框
                bordercolor 边框颜色
                style="border-collapse: collapse" 双线变单线
                colspan跨列  ****
                rowspan 跨行 ****
                height 高度
                width 宽度
                align 对齐方式

            注意:
                先有行再有列
                内容需要放在单元格中
    -->
    <table border="1" width="500px" height="350px" align="center" style="border-collapse: collapse" bordercolor="hotpink" bgcolor="pink">
        <tr>
            <th colspan="6">课程表</th>
        </tr>
        <tr bgcolor="aqua">
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr align="center">
            <td rowspan="3">上午</td>
            <td>体育课</td>
            <td bgcolor="#ffe4c4">体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr align="center">
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr align="center">
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr align="center">
            <td rowspan="2">下午</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr align="center">
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
    </table>
</body>
</html>

form表单 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--
        form表单 : 收集用户输入的数据
            form 表单标签
                属性:
                    action 提交位置
                    name form表单的名字
                    method : 提交方式
                        get 数据拼接到url地址栏中进行发送  不安全   大小由显示   默认提交方式   效率较高
                        post 数据在请求体中, 安全 ,大小没有限制
                    enctype :
                        当表单中存在文件上传,需要做修改

            表单元素 : 定义在form标签中的元素
            大部分的表单元素都是通过input标签定义

            input 标签
                type属性 :
                    text 普通文本框   type,name
                    password 密码框  加密效果
                    radio 单选框
                        多个单选框只能选择一个,需要把它们分成一组,name属性值相等就是一组
                    checkbox 多选框
                        name属性值相同分为一组,作用相同分为一组
                    file 文件上传
                        注意修改entype属性值  enctype="multipart/form-data"
                    reset 重置
                    submit 提交
                    button 按钮
    -->
    <h3>相亲信息表</h3>
    <form action="http://www.baidu.com" name="form_info" enctype="multipart/form-data">
        <p>
            姓名 : <input type="text" name="username" value="zhangsan">
        </p>
        <p>
            微信密码 : <input type="password" name="userpwd">
        </p>
        <p>
            性别 :
            <input type="radio" name="gender" value="man"> 男
            <input type="radio" name="gender" value="woman"> 女
        </p>
        <p>
            爱好 :
            <input type="checkbox" name="hobby" value="code"> 敲代码
            <input type="checkbox" name="hobby" value="read"> 读书
            <input type="checkbox" name="hobby" value="basketball"> 篮球
        </p>
        <p>
            个人生活照 : <input type="file" name="pic">
        </p>
        <p>
            <input type="submit">
            <input type="button" value="按钮">
            <input type="reset" value="重置">
        </p>
    </form>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--
        input type : hidden 隐藏框
        textarea 多行文本域
        select 下拉框
            option 下拉列表选项
        fieldset 分组
            legend  分组标题

        label 添加标注
            是文本内容与表单标签进行绑定

        默认选中:
            单选框|多选框 : checked
            下拉列表: selected

        readonly 只读 不能修改可以提交
        disabled 禁用 显示为灰色,不能修改不能提交
        placeholder 提示字
        required 必填属性
        maxlength 最大长度 (字符个数)
    -->
    <fieldset>
        <legend><h3>相亲信息表</h3></legend>
        <form action="" name="form_info" method="post">
            <p>
                姓名 : <input type="text" name="username" required maxlength="5">
            </p>
            <p>
                性别 :
                <input type="radio" name="gender" value="man" id="man" checked> <label for="man">男</label>
                <input type="radio" name="gender" value="woman" id="woman"> <label for="woman">女</label>
            </p>
            <p>
                <input type="hidden" name="隐藏框的name" value="隐藏框的值">
            </p>
                交友宣言 : <textarea name="info" placeholder="提示字"></textarea>
            <p>
                理想型 : <select name="wifetype" multiple>
                    <option value="1">御姐型</option>
                    <option value="2">萝莉型</option>
                    <option value="3" selected>温柔型</option>
                </select>
            </p>
            <fieldset>
                <legend>隐私信息</legend>
                体重 <input type="text" name="weight">
                身高 <input type="text" name="height">
            </fieldset>
            <p>
                <input type="submit">
                <input type="button" value="按钮">
                <input type="reset" value="重置">
            </p>
        </form>
    </fieldset>
</body>
</html>

Lucky_syw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础语法

html 超文本标记语言<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基础语法</title></head><body>  <!-- 1.html 超文本标记语言 2...
复制链接

扫一扫