html 基础（9.19 第七天）

一、HTML：超文本标记语言，是一种标签语言，不是编程语言，显示数据有双标签<body></body> 和单标签<img src=# / >，标签大小写都可以
通过浏览器解析HTML代码，在<body>标签中数据会被显示出来

<IDOCTYPE html>
<html>
    <head>
        title></title> 标题
    </head>
    <body>
        显示数据
    </body>
</html>

二、HTML常用的标签

<h1> ------> <h6>标题
    例：<h1>这是标题1<h1>
<hr>                横线
<br>                换行
<title></title>  标题头
<meta charsent="utf-8">   使用utf-8字符编码
<script type="text/javascrpe">   在网页弹出窗口
    alert("你被攻击了")
</script>
<p></p>         段落标签，会换行
<a></a>   链接标签 例：<a href="https://www.baidu.com">百度一下</a>
<img />     图片标签 例：<img src="图片地址" /> </img>
<img src=# width= "1000" height="1000">  改变图片大小
<!-- -->      注释标签

三、表格

<table border="1" cellspacing="10" cellpadding="10">
    <!--width   　　  表示表格的宽度
        border   　　　表示外边框的粗细
        cellspadding   内边框与外边框间距的大小
        cellpadding     内边框与数据内容的距离
    -->
    <tr>
        <th><!--表头（会加粗居中）-->
        </th>
    </tr>
    <tr><!--表示行-->
        <td style="
            font-synthesis: ; 字体
            font-size: ；字号
            color:; 字色
            border-bottom:1px dashed #ccc; 加一条虚线"><!--表示列-->

            这是表格

            &nbsp    表示空格

        </td>
    </tr>
</table>

　　1、合并列

<table border="1">
    <tr>
        <td colspan="2">1</td><!-- colspan 用于合并列 -->
        
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

　　2、合并行

<table border="1">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>addr</th>
    </tr>
    <tr>
        <td>张三</td><!-- rowspan 用于合并行 -->
        <td rowspan="2">24</td>
        <td>qwe</td>
    </tr>
    <tr>
        <td>李四</td>
        
        <td>asd</td>
    </tr>
</table>

　　3、列表的有序无序

<table>
    <ul><!--无序列表-->
        <li>第一</li>
        <li>第二</li>
    </ul>

    <ol><!--有序列表-->
        <li>第一</li>
        <li>第二</li>
    </ol> 
</table>

　　4、表单

表单：搜集用户的信息<br>
<form name="input_data" action="index.php" method="get">
    <!--
        action：表示数据提交到哪个页面
        method：提交数据的方式，get（数据参数拼接url），post（数据参数放在请求内容中，在url中看不到发送的数据）-->
    <label>姓名：</label>
    <input type="text" name="name"><!--文本域-->
    <br>
    <label>密码：</label>
    <input type="password" name="pwd">
    <br>
    <input type="radio" name="gender" value="1">男<br>  <!--按钮-->
    <input type="radio" name="gender" value="0">女<br>
    <input type="radio" name="gender" value="01">不知道<br>

    爱好：<br>
    <input type="checkbox" name="aihao" value="lanqiu">篮球<br>
    <input type="checkbox" name="aihao" value="zuqiu">足球<br>
    <input type="checkbox" name="aihao" value="pingpangqiu">乒乓球<br>

    提交：
    <input type="submit" name="sub" style="" value="提交"><br>
</form>

html 基础 （9.19 第七天）

猜你喜欢

html 基础（9.19 第七天）