<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 避免中文乱码
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
标签 div
标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。与 CSS 一起使用,用来布局网页
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
标签 lable
标签
<lable>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
标签 p
标签
<p>
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
<p>This is some text in a very short paragraph</p>
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
内部链接
<a href="#one">Jump to Bottom</a>
<div id ="one">abcdefg</div>
有页面内部跳转,点击页面上的Jump to Bottom时,就会跳转到<div>元素的位置
<a>标签中不能有target="_blank",不然会出现在新建页面中
链接嵌套在段落中
<p>
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
效果:
Here's a link to www.freecodecamp.org for you to follow.
链接占位符
<a href="#" target="_blank">cat photos</a>
当不确定链接指向时,可先用#占位
给图片添加链接
> <a href="https://www.freecodecamp.org" target="_blank"> <img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
无序列表
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
Input必填字段
<input type="text" required>
加上required,如不填写则会提示
单选按钮
<label for="indoor" >
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
a.每个单选按钮都应嵌套进它自己的 label 元素中
b.所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮,选中其中一个按钮,其他按钮即显示为未选中,以确保用户只提供一个答案
c.在 label 元素上设置 for 属性,让其值与相关联的 input 单选按钮的 id 属性值相同。 从而在标签和相关的 input 元素之间建立关联关系
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
value设定发送到服务端的默认值
默认选中
<input id="outdoor" type="radio" name="indoor-outdoor" checked>Outdoor
checked表示默认选中
复选框
<input type="checkbox">
其他规则语法同单选框一致