HTML 快速入门

最新推荐文章于 2024-09-12 18:02:32 发布

tqtqtq**

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量677

点赞数 12

文章标签： html 前端 java

本文链接：https://blog.csdn.net/2301_80482258/article/details/140986591

版权

HTML结构标签

<html>
	<head>
		<title> HTML 快速入门</title>
	</head>
	<boby>
		
	</boby>
</html>

特点：

HTML标签不区分大小写（一般小写）
HTML标签属性值单引号双引号都可以
HTML语法松散

标题标签

标签:<h1>..</h1>(h1→h6 重要程度依次降低)

注意:HTML标签都是预定义好的，不能自己随意定义。

水平线标签

    <!-- 行内样式 -->
    <h1 style="color: brown;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>

<hr>

图片标签

<img src=".." width=".." height="...">
绝对路径:绝对磁盘路径(D:/xxxx)

绝对网络路径(https://xxxx)

相对路径:从当前文件开始查找。(./:当前目录，../:上级目录)

超链接

标签:<a>
属性:
        href:指定资源访问的url
        target:指定在何处打开资源链接
_self:默认值，在当前页面打开
              _blank:在空白页面打开

a{
    color: black;
    text-decoration: none;  
    /* 设置文本为标准的文本 */
}

<span>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

音频、视频标签

    <!-- 视频 -->
    <video src="./video/Forza Horizon 4 2023.08.31 - 20.28.57.02.mp4" controls width="950"></video>

    <!-- 音频 -->
    <audio src="./music/我是如此相信-周杰伦.mp3" controls></audio>

换行、段落标签

换行:<br>;

段落:<p>

文本加粗标签

表格标签

<table>:定义表格
<tr>:定义表格中的行，一个<tr>表示一行
<th>:表示表头单元格，具有加粗居中效果
<td>:表示普通单元格

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表格</title>
    <link rel="stylesheet" href="./css/excel.css">
</head>

<body>
    <!-- border 设置边框线   cellspacing设置取消边框之间的距离  width表格宽度 -->
    <table border="1px" cellspacing = "0" width = "600px">
        <tr>
            <th>序号</th>
            <th>品牌LOGO</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="picture/hw.png"
                    width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="picture/ali.png"
                width="100px"></td>
            <td>阿里巴巴</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>

</html>

表单标签

<form>

action:表单提交的url地址，往何处提交数据。如果不指定，默认提交到当前页面

method:表单的提交方式

get:在url后面拼接表单数据，比如:?username=Tom&age=12，url长度有限制。默认值

post:在消息体(请求体)中传递的，参数大小无限制的.

表单项必须要有name属性才能提交

    <form action="" method="get">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

        <input type="submit" value="提交">
    </form>

    <!-- form表单属性:
        action:表单提交的ur1，往何处提交数据。如果不指定，默认提交到当前页面
        method:表单的提交方式
          get:在ur1后面拼接表单数据，比如:?username=Tom&age=12，url长度有限制 。默认值
          post:在消息体(请求体)中传递的，参数大小无限制的. -->
    <form action="" method="post">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

        <input type="submit" value="提交">
    </form>

表单项标签

    <form action="" method="post">
        姓名:<input type="text" name="name"> <br><br>
        密码:<input type="password" name="password"><br><br>
        性别:<label><input type="radio" name="gender" value="1">男</label>
        <label><input type="radio" name="gender" value="2">女</label><br><br>
        爱好：<label><input type="checkbox" name="hobby" value="game"> game </label>
        <label><input type="checkbox" name="hobby" value="java"> java </label>
        <label><input type="checkbox" name="hobby" value="sing"> sing </label>
        <br><br>
        图像:<input type="file" name="image"><br><br>
        生日:<input type="date" name="birthday"><br><br>
        时间:<input type="time" name="time"> <br><br>
        日期时间:<input type="datetime-local" name="datetime"> <br><br>
        邮箱:<input type="email" name="email"> <br><br>
        年龄:<input type="number" name="age"><br><br>
        学历:<select name="degree">
            <option value="">-----------请选择------</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select><br><br>
        描述:<textarea name="description" cols="30" rows="10"></textarea><br><br>
        <input type="hidden" name="id" value="1">
        <!-- 表单常见按钮 -->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <br>
    </form>

css

CSS引入方式

行内样式

<!-- 行内样式 -->
    <h1 style="color: brown;">焦点访谈：中国底气 新思想夯实大国粮仓</h1>

内嵌样式

  <!-- 方法二：内嵌样式 -->
    <style>
        h1 {
            color: red ;
        }
    </style>

外联样式

xxx.css

<link rel="stylesheet" href="./css/news.css">

css选择器

/* 元素选择器 */
span{
    color: #A1A1A1;
}


/* 类选择器 */
.cls{
    color: #A1A1A1;
}


/* ID选择器 */
#time {
    color: #A1A1A1;
    font-size: 13px;  
    /* 设置字体大小 */
}

css样式

color:设置文本的颜色

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

font-size:字体大小(注意:记得加px)

text-decoration:规定添加到文本的修饰，none表示定义标准的文本

在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符: 

盒子样式

width:设置宽度
height:设置高度
border:设置边框的属性，如:1px solid #000;
padding:内边距
margin:外边距
注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:padding-top、padding-left、padding-right