HTML基础知识

最新推荐文章于 2022-10-28 17:11:59 发布

LLL18487091432

最新推荐文章于 2022-10-28 17:11:59 发布

阅读量456

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/LLL18487091432/article/details/121634402

版权

1、HTML 标题

HTML 标题（Heading）是通过 h1-h6 加中括号<>等标签进行定义的。

2、HTML 段落
HTML 段落是通过，标签进行定义的。

3、HTML 链接
HTML 链接是通过《a》标签进行定义的。
4、HTML 图像
HTML 图像是通过标签进行定义的。
5、HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素语法：HTML 元素以开始标签起始，HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性
HTML的一般结构如下：
<html>----以<html>开始，以</html>结束，表示之间的文档是HTML
<head>----HTML文档的头部，主要放文档的标题信息
<title>未使用CSS的HTML文件</title>
</head>
<body>----HTML的主体部分
<h1>未使用CSS的HTML文件</h1>
<hr>----在网页中插入一条水平线
<p>未使用CSS的HTML文件</p>
</body>
</html>
3.标记语法
(1)标记在使用时必须用尖括号"<>"括起来；标记的大小写作用相同；
(2)单标记：<标记名称>，例如<br>它表示换行；
(3)双标记：<标记>内容</标记>
例如：<em>第一：</em>，它表示突出对“第一：”的显示；
(4)：标记可以包含标记本身，即可以嵌套使用

<html>
<head>
<title>请输入密码</title>
</head>
<body>
<form>
<table border="1", width="321">
<tr>
<td>请输入密码</td>
</tr>
<tr>
<td>密码<input type="password" name="text1"></td>
</tr>
</table>
</form>
</body>
</html>

表单代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>国内新闻</div>
    <hr>
    <div>
        <ul>
            <li><a href="">美驻华大使</a></li>
            <li><a href="">县委书记</a></li>
            <li> <a href="">党委书记</a> </li>
            <li><a href="">要天天开心</a></li>
            <li><a href="">美国纽约</a></li>
        </ul>
    </div>
    <div>
        <p style="font-size: larger;">国外新闻</p>
        <hr>
        <ol>
            <li><a href="">美国公债</a></li>
            <li><a href="">印度疫情</a></li>
            <li><a href="">美国公司</a></li>
            <li><a href="">唱歌跳舞</a></li>
        </ol>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table border="2" cellspacing="1" cellpadding="2" style="margin: auto;">
        <p style="text-align: center;">课程表</p>
        <tr>
            <td>项目</td>
            <td colspan="5">上课</td>
            <td colspan="2">休息</td>
        </tr>
        <tr>
            <td>星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期天</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td>英语</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>

        </tr>
    </table>

</body>

</html>

<html lang="en">  
   <head>  
       <meta charset="UTF-8">  
       <meta http-equiv="X-UA-Compatible" content="IE=edge">  
       <meta name="viewport" content="width=device-width, initial-scale=1.0">  
       <title>Document</title>  
 </head>  
 <style>  
    body {  
        background-image: url(bg.jpg);  
    }  
   form {  
       width: 700px;  
       height: 500px;  
       background-color: aliceblue;  
       border-radius: 15px;  
       margin: auto;  
    }  
   .a1 {  
       margin-left: 230px;  
    }  
    
 </style>  
   <body>  
       <form action="">  
            <center>  
               <h1><img src="logo.png" width="70px" height="70px">用户注册</h1>  
            </center>  
            <p class="a1">用户名称：<input type="text"></p >  
            <p class="a1">登录密码：<input type="password"></p >  
            <p class="a1">重复密码：<input type="password"></p >  
            <p class="a1">电子邮箱：<input type="text"></p >  
            <p class="a1">性别：<input type="radio" value="man">男  
               <input type="radio" value="woman">女</p >  
            <p class="a1">职业：<select name="interest" id="">  
               <option value="basketball">学生</option>  
               <option value="music">老师</option>  
               <option value="lol">经理</option>  
               <option value="kandianyun">教练</option></p ></select>  
            <p class="a1">兴趣爱好：<textarea cols="20px" rows="4px"></textarea></p >  
            <center><button type="reset" class="a2">注册</button>  
            <button type="submit">重置</button></center>  
    </form>  
</body>  
</html>