1.HTML不区分大小写但建议小写
<head>
<title>定义标题
<style>定义css样式
<meta>定义元数据，指定网页的字符集 描述 关键词 作者
<link>链接<base>根目录2.title 属性，`<p title="LYF">哈哈哈哈</p>` 鼠标悬浮于元素之上时会显示title内容，一般使用双引号，若内容有双引号则使用单引号
3.<h>标题，1~6，自动增加外边框，仅使用于标题
4.<hr>横线
5.<br>换行
6.<p>段落，单起一行，自动添加外边距
7.<pre>保留原格式，因为浏览器自动忽略编辑器中的空格和回车换行，
8.” “可代替空格
9.字体设置
10.超链接，<a> 属性有target ：-blank打开新的页面 -self在当前页面打开
颜色 未访问---蓝色加下划线 访问过---紫色加下划线 点击状态---红色加下划线
11.书签 在目的跳转的地方设置id，在需要引用书签的地方用<a href=“id”>
12.相对路径和绝对路径，../可跳至上一层目录，使用相对路径不利于维护，/相对于服务器根目录而不是网站或项目根目录
13.<img>用于显示图片，src=图片链接，alt当图片显示失败时显示alt的内容，可以嵌套在<a>中点击图片跳转至链接
14.<table>用于显示表格<tr>放在每一行之前，<th>表示表头，<td>表示表内数据
仅用于显示数据表格，不用于组织布局 登录框等
默认样式无边框
无论表头是水平还是垂直均基于行
rowspan=“n”一格跨n行
colspan=“n”一格跨n列
可用<thead> <tbody> <tfoot>表示标题 内容 页脚，无实际意义，方便设置样式，方便打印时跨页自动添加页眉页脚
15.列表
无序列表<ul> 每一行<li> 样式 type=“list-style-type:disc实心点 circle空心点 square 正方形 none 无”
有序列表<ol> 每一行<li> 样式 type=“1 数字 A字母 i ii iii”
可以嵌套或用于超链接 导航栏
16.<div>用于页面布局
17.<span>文本容器，方便设置样式
18.块级元素<div> <h1>~<h6> <p> <from> <ul> <table>独占新行 能占多少占多少
内联元素 <span> <a> <img> <label>不以新行开始 需要占多宽占多宽
19.form表单 input类型 看代码！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--标题-->
</head>
<body><p title="LYF">这是一个段落</p><p title='"LYF"!'>这是一个段落</p><br><!--这是一个换行--><hr><!--横线--><pre id="l1">江雪柳宗元 〔唐代〕千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。</pre><p>空格 空格</p><!--标题用于呈现文章结构--><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6><p>这里使用了< p >标签</p><!--<和>是<和>的替换符--><b>粗体</b><strong>粗体</strong><i>斜体</i><em>斜体</em><small>小字体</small><mark>标记</mark><del>删除线</del><ins>下划线</ins><p>右 <sub>下</sub>角</p><p>右 <sup>上</sup>角</p><!--超链接--><a href="/?not_checkout=1" target="_blank">博客</a><br><a href="/" target="_self">bilibili</a><br><a href="#l1">书签</a><!--跳至id为l1处--><img src="=3505090447,2292204219&fm=253&fmt=auto&app=120&f=JPEG?w=690&h=460" alt="LYF"><br><a href="/" target="_blank"><img src="=4140441907,2471906451&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"></a><!--表单表的标题水平--><table><tr><th>姓名</th><th>学号</th><th>年龄</th></tr><tr><td>zm</td><td>2019</td><td>21</td></tr><tr><td>zl</td><td>2019</td><td>22</td></tr></table><!--表单表的标题垂直--><table><tr><th>姓名</th><td>zm</td></tr><tr><th>学号</th><td>2019</td></tr><tr><th>年龄</th><td>22</td></tr></table><table><tr><th>姓名</th><th>学号</th><th colspan="2" >男/女</th></tr><tr><td>zm</td><td>2019</td><td>1</td><td>0</td></tr><tr><td>mm</td><td>2019</td><td>0</td><td>1</td></tr></table><table><tr><th>姓名</th><td>zm</td></tr><tr><th rowspan="2">学号</th><td>2019</td></tr><tr><td>4366</td></tr><tr><th>年龄</th><td>22</td></tr></table><p>我<span style="color:red">心之所向</span></p><ul style="list-style-type:disc"><li>好</li><li>像</li><li>不</li><li>能</li></ul><form>文本<input type="text"><br>密码<input type="password"><br>多选框<br><input type="checkbox" checked>我<br><input type="checkbox">你<br><input type="checkbox">他<br>单选框<br><input type="radio" name="1">夕阳<br><input type="radio" name="1">晴雨<br><input type="radio" name="1">公路<br><hr><input type="radio" name="2">答案<br><input type="radio" name="2">喜欢<br><input type="radio" name="2">知道<br>可点击文字选择的单选框用label for实现<br><input type="radio" name="4" id="sight1"><label for="sight1">夕阳</label><br><input type="radio" name="4" id="sight2"><label for="sight2">晴雨</label><br><input type="radio" name="4" id="sight3"><label for="sight3">知道</label><br>可点击文字选择的单选框用label 嵌套实现<br><label>答案<input type="radio" name="2"></label><br><label>喜欢<input type="radio" name="2"></label><br><label>知道<input type="radio" name="2"></label><br>文件<input type="file"><br>隐藏<input type="hidden" name="zm" value="123456"><br>日期<input type="date"><br>数量<input type="number" min="0" max="5"><br>颜色<input type="color"><br>文本框<br><textarea rows="5" cols="20">请输入文字</textarea>选择地点：<br><select><option></option><option>成都</option><option>深圳</option><option>杭州</option></select>结合输入框和选择框：<br><input list="list"><datalist id="list"><option>成都</option><option>深圳</option><option>杭州</option></datalist>
</form>
</body>
</html>
本文发布于:2024-01-28 10:47:21，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17064100446875.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
