HTML常用标签
文章目录
- 什么是HTML
- 常用标签
什么是HTML
HTML是一种用标签（tag)描述网页的语言
标签成对出现 <> </> 表示开始和结束
常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>第一个HTML页面</h1>
<p>内容</p>
</body>
</html>
title 之间表示浏览器最上方的显示
body 之间表示网页页面显示的内容
h1 表示标题 h1到h6以此减小字号
p 表示段落
<body>
<h1>第一个HTML页面</h1>
<p>内容</p>
<a href="https://www.njupt.edu.cn/">南邮官网链接</a>
</body>
a 表示超链接 herf=“网页链接” 标签之间的内容则是超链接显示的文字
点击链接
点击超链接，可以跳转到对应的页面
图片
通过img标签，不用成对的标签，因为不需要在标签里设置文本 将图片放入img文件夹
输入src=就会自动联想可选择的图片，再通过width和height设置水平长度，竖直高度。
<img src="img/food.jpg" width="150" height="100" />
最后的斜线可要可不要
元素
成对标签里的内容
比如
<p>内容</p> 元素为 内容
<a href="https://www.njupt.edu.cn/">南邮官网链接</a>
元素为 南邮官网链接
换行符<br> 元素为空 empty content
属性
<a href="https://www.njupt.edu.cn/">南邮官网链接</a>
href为属性
图片中 src width height为属性
align 属性 对齐方式
body bgcolor 背景颜色
<body align="center" bgcolor="aqua">
中间对齐，背景颜色更换。
常用属性
<hr/>
水平线，用于分隔内容
注释
<!-- This is a comment -->
style属性淘汰了bgcolor
<body align="center" style="background-color:aliceblue">
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
表table
常用标签
<table border="1" align="center">
<tr><th>head</th></tr>
<tr><td>11</td><td>33</td></tr>
<tr><td>22</td><td> </td></tr>
</table>
<div></div>
div标签不显示，起到分块的作用。
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
JavaScript使用id属性
对某个元素使用id属性取一个唯一的命名，在javascript里可以调用document.getElementById( id ).innerHTML=“改变后的文本”;
我们在head里加入一段script代码，同样是成对标签。里面定义一个函数
<script>
function change()
{
document.getElementById("firstP").innerHTML="第一个段落";
}
</script>
再在段落里把属性id取名字"firstP"。
<p id="firstP"><b><i>内容</i></b></p>
在设置一个button
<button onclick="change()">改变</button>
设置点击属性onclick为调用change()函数
于是我们点击 改变 按钮，就会调用change函数，再通过document.getElementById()，根据id 定位到id为”firstP“的元素，再调用innerHTML将该元素换成我们设定好的元素内容”第一个段落“。
点击按钮后
在这一过程中id属性起到定位的作用。且id这两个字母只能小写。
一般来说html里单引号双引号都可以。但是如果双引号里面又要用引号，如果继续用双引号 里面的第一个双引号会把外面的左边的双引号解除效果。这个时候里面改用单引号。
例如：
<button
type="button" onclick="document.getElementById('demo').innerHTML = Date()">
点击我来显示日期和时间
</button>
URL统一资源定位器
表单
form用于收集用户输入
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<form>
First name:<input type="text" name="firstname">
<br>
Last name:<input type="text" name=lastname">
</form>
文本框默认20个字符。
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
checked表示默认选择，如果有多个元素checked，取最后一个元素默认勾选。
<form action="https://www.njupt.edu.cn/">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
action属性表示点击submit按钮提交后会跳转到的页面。
点击submit会通过action定位到南邮官网网页。
method属性
规定提交表单时所用的HTTP方法 get或post
get方法，这是默认方法。
页面地址栏内容可见。
get适合少量数据提交且数据没有敏感信息，例如密码等。
post方法 在页面地址栏提交的数据不可见。
想要被提交，name属性必须设定，否则无效。
例如删去firstname name属性。
input type属性
text明文
password暗文
radio单选或零选
checkbox零选或多选
button可以通过点击按钮调用javascript里的函数
value初始值
formmethod修改http方法。