HTML
超文本标记语言,由一系列标签和文本元素组成,每个元素都由标签包围。
<h1>一级标题</h1>
<h2>二级标题</h2>
....
还有<h3><h4>....<h6>表示不同等级的标题。
<p>段落标签</p>
<!--注释-->
<main>帮助搜索引擎知道你的页面主内容在哪里</main>
<img>添加图片标签
里面添加src元素制定图片位置的url,还必须有alt属性指定当图片加载失败后显示的文本
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="freeCodeCamp logo">
<a>链接到其他网页的标签</a>
标签中href指定要链接的目标网址
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
target="_blank“标识点击链接开启新的窗口显示
<a></a>可以链接到同一网页的不同部分
href=#id (在要跳转到的元素前添加id属性)
例:
<a href=#footer>Jump to Bottom</a>
<footer id="footer">Copyright Cat Photo App</footer>
<a></a>可以嵌套到其他文本元素中
<p>View more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a></p>
<a href="#">死链接</a>
图片做链接
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
无序列表
<ul>
<li>...</li>
<li>..</li>
...
</ul>
有序列表
<ol>
<li>..</li>
<li>..</li>
...
</ol>
文本域
-
文本输入
<input type="text"> 空白文本输入框
<input type="text" placeholder="输入"> 文本框中会有提示文字占位
-
提交输入的文本到指定URL
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">submit</button> 提交按钮
</form>
提交input的内容到form action属性指定的URL。
-
强制填写内容不能为空 required
<input type="text" placeholder="cat photo URL" required>
-
单选
<input id="indoor" type="radio" name="indoor-outdoor"> 单选框
<label for="indoor">indoor</label>单选框标签,for必须对应单选框中的id
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">outdoor</label>也可以这么写,选项组中的name必须一致才能实现单选
-
复选框
<label for="love"><input id="love" type="checkbox" name="personality">love</label>
<label for="smile"><input id="smile" type="checkbox" name="personality">smile</label>
-
input标签的value属性
当被选中的框内容要提交到服务器时,指定上传的值,以name=value的形式。
<input id="indoor" type="radio" name="indoor-outdoor" value="indoor">如果不指定value的话默认是on
- 指定默认被选中的框 checked
<input id="indoor" type="radio" name="indoor-outdoor" checked>
-
<div></div>分散元素标签
html基本结构
<!DOCTYPE html> 开头指定整个文本使用的html的版本
<html>所有内容都写在html标签中
前面学习的标签等内容要写到这里
</html>
-
<head></head>
里面包含<titel></title> <meta></meta> <style></style>等描述性的标签
-
<body></body>
里面包含正文内容及相关标签