【沿路行走】-HTML

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>

 里面包含正文内容及相关标签

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值