html总结

html

......

(数字代表不同级别的标题)​​

.....

表示段落​

<!-- -->表示注释

​访问主要的网页​

2、可以使用img元素来为网站添加图片,其中src属性指向图片的地址

<img src="https://www.freecatphotoapp.com/your-image.jpg">

img元素没有结束标签

<img src="图片地址" title="图片的信息" alt="图片不正常时,内容代替图片"

3.cat photosa>超链接

4.target 是锚点元素的一个属性,它用来指定链接的打开方式。 属性值 _blank 表示链接会在新标签页打开。 href 是锚点元素的另一个属性,它用来指定链接的 URL:

<a href="https://www.freecodecamp.org" target="_blank"> ... </a>

如果把 ahref 属性值设置为 #,创建的是一个死链接(不跳转到其他画面)。

可以把现有的img图片元素前面加...... 

5.无序列表以 <ul> 开始,中间包含一个或多个 <li> 元素, 最后以 </ul> 结束。

6.有序列表以 <ol> 开始,中间包含一个或多个 <li> 元素。 最后以 </ol> 结束。

7.input 输入框可以让你轻松获得用户的输入

<input type="text">

input 输入框的 placeholder 占位符文本设置为 "cat photo URL"。

<input type="text" placeholder="cat photo URL">

form嵌套input

​​

<input type="text" placeholder="cat photo URL">

</form>

8.当你设计表单时,你可以指定某些字段为必填项(required),只有当用户填写了该字段后,才可以提交表单。

如果你想把文本输入框设置为必填项,在 input 元素中加上 required 属性就可以了,例如:<input type="text" required>

最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如:

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

9.我们也可以在 label 标签中嵌入 input 元素:

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

10.radio buttons(单选按钮)就好比单项选择题,正确答案只有一个。

单选按钮是 input 选择框的一种类型。

每一个单选按钮都应该嵌套在它自己的 label(标签)元素中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮,选中其中一个按钮,其他按钮即显示为未选中,以确保用户只提供一个答案。

下面是一个单选按钮的例子:

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如:

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>

我们也可以在 label 标签中嵌入 input 元素:

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

11.在表格中添加一对单选按钮,每个按钮嵌套在自己的 label 元素中。 一个选项应该是 indoor ,另一个选项应该是 outdoor。 两个按钮的 name 属性都是 indoor-outdoor,以创建一组单选按钮。

checkboxes(复选框)就好比多项选择题,正确答案有多个。

复选框是 input 选择框的一种类型。

每一个复选框都应该嵌套在它自己的 label(标签)元素中。 这样,我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的复选框应该拥有相同的 name 属性。

使得 inputlabel 关联的最佳实践是在 label 元素上设置 for 属性,让其值与相关联的 input 复选框的 id 属性值相同。

下面是一个复选框的例子:

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

提交表单时,所选项的值会发送给服务端。 radiocheckboxvalue 属性值决定了发送到服务端的实际内容。

例如:

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>

这里有两个 radio 单选框。 当用户提交表单时,如果 indoor 选项被选中,表单数据会包含:indoor-outdoor=indoor。 也就是所选项的 namevalue 属性值。

如果没有指明 value 属性值,则会使用默认值做为表单数据提交,也就是 on。 在这种情况下,如果用户选中 "indoor" 选项然后提交表单,表单数据则会包含 indoor-outdoor=on。 这样的表单数据看起来不够直观,因此最好将 value 属性值设置为一些有意义的内容。

12.用 checked 属性把第一个复选框和单选按钮都设置为默认选中。

在一个 input 元素里面添加 checked 这个词,即可实现。 例如:

<input type="radio" name="test-name" checked>

后面+checked

13.div 元素也叫内容划分元素,是一个包裹其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。

和其他普通元素一样,你可以用 <div> 来标记一个 div 元素的开始,用 </div> 来标记一个 div 元素的结束。


将你的列表“猫喜欢的三件事”和“猫最讨厌的三件事”放入同一个 div 元素中。

提示:你可以在第一个 <p> 之前插入 div 开始标记,在 </ol> 之后插入 div 结束标签。 这样,所有的列表都会位于 div 之内。

14.版本,"..." 部分就是版本号。 <!DOCTYPE html> 对应的就是 HTML5。

! 和大写的 DOCTYPE 是很重要的,尤其是对那些老的浏览器。 但 html 无论大写小写都可以。

所有的 HTML 代码都必须位于 html 标签中。 其中 <html> 位于 <!DOCTYPE html> 之后,</html> 位于网页的结尾。

这是一个网页结构的列子。 你的 HTML 代码会在两个 html 标签之间。

<!DOCTYPE html>
<html>
​
</html>
  1. html 的结构主要分为两大部分:headbody。 网页的描述应放入 head 标签, 网页的内容(向用户展示的)则应放入 body 标签。

    比如 linkmetatitlestyle 都应放入 head 标签。

    这是网页布局的一个例子:

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值