HTML常用语法总结【精华】
HTML常用语法总结
<html><head><title>这是第一个页面title>head><body>hello worldbody>
html>
id属性
hello world
表示标签的唯一身份标识，用于后期便于控制，不影响显示
鲁棒性强
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>Documenttitle>
head>
<body>
body>
html>
基本标签
注释
快捷键 ctrl + /
标题：h1 ~ h6
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
段落：p
<p>段落标签
p>
<p>段落标签
p>
换行：br（单标签）
这里需要换行→ <br/>换行成功
格式化：b i s u
- 加粗：strong 标签 和 b 标签
- 倾斜：em 标签 和 i 标签
- 删除线：del 标签 和 s 标签
- 下划线：ins 标签 和 u 标签
<strong>加粗strong>
<b>加粗b><em>倾斜em>
<i>倾斜i><del>删除线del>
<s>删除线s><ins>下划线ins>
<u>下划线u>图片：img（单标签）
<img src="xxx.jpg"alt="加载失败时替换文字"title="鼠标悬停时提示文字"width="1920px" height="1080px"border="5px">
src 可以为
绝对路径/相对路径/网络路径相对路径以html所在的目录为基准
- 当前路径：
“./xxx.jpg”- 上级路径：
”../xxx.jpg“
超链接：a
<a href="https://github.com">这是一个超链接a>
<a href="xxx.html">内部跳转链接a>
<a href="#">空链接a>
<a href="#one">第一集a>
<a href="#two">第二集a><p id="one">第一集剧情 <br>
p>
<p id="two">第二集剧情 <br>
p>
表格标签：table
- table：表示整个表格（width height border cellspacing等）
- tr：表示表格的一行
- td：表示一个单元格
- th：表示表头单元格. 会居中加粗
- thead：表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody：表格得到主体区域
<table width="200px" height="100px" border="1px" cellspacing="0"><tr><th>姓名th><th>姓名th><th>年龄th>tr><tr><td>张三td><td>男td><td>20td>tr>
table>
列表标签：list
无序列表、有序列表、自定义列表
<h3>无序列表h3>
<ul><li>第一个li><li>第二个li><li>第三个li>
ul>
<h3>有序列表h3>
<ol><li>第一个li><li>第二个li><li>第三个li>
ol>
<h3>自定义列表h3>
<dl><dt>列表标题dt><dd>第一个dd><dd>第二个dd>
dl>
⭐表单标签
form标签
常用于交互时使用
input标签
<input type="text"><input type="password"><input type="radio" name="sex">男<input type="radio" name="sex" checked=""checked>女<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<input type="button" value="一个按钮" onclick="alert('弹窗提示')"><input type="file">
label标签
<input type="text" id="labeltest">
<label for="labeltest">label for实现绑定label>
select标签：下拉菜单
<select>
<option>--请选择年份--option>
<option>1998option>
<option>1999option>
<option>2000option>
select>
textarea标签：多行编辑框
<textarea rows="3" cols="50">这是一个多行文本textarea>
无语义标签
div独占一行，span不独占一行
<div>
<span>第一句span>
<span>第二句span>
<span>第三句span>
div><div>
<span>第一句span>
<span>第二句span>
<span>第三句span>
div>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！