freecodingcamp学习-HTML 基础

hmtl标签

开始标签 结束标签 通常成对出现 举例
<h1>hello<h1>

将某些字加粗显示


举例

<p><strong>hello</strong></p>

创建固定链接

有时你想为网站添加一个锚点,但如果你还不确定要将它链接到哪儿,这时可以使用固定链接。
href属性的当前值是指向 “http://freecatphotoapp.com”,将href属性的值替换为#,也称为井号,就可以创建固定链接。

<a href="http://freecatphotoapp.com" target="_blank">猫图</a>
<a href="#" target="_blank">猫图</a>

给图片添加链接

把你的图片嵌套进锚点。举例如下:

<a href="#"><img src="http://cdn.chenzhicheng.com/running-cats.jpg" alt="三只萌萌的小猫"></a>

三只萌萌的小猫
把锚点的href属性的值设置为#,就可以创建固定链接。

创建一个无序列表

HTML 有一个特定的元素用于创建无序列表unordered lists(缩写 ul)。 无序列表以<ul>开始,中间包含一个或多个<li>元素,最后以</ul>结尾。 例如:

<ul>   
     <li>牛奶</li> 
     <li>奶酪</li>
</ul> 

将会创建一个包含牛奶和奶酪的无序列表。

创建有序列表

HTML 有一个特定的元素用于创建有序列表ordered lists(缩写 ol)。
有序列表以<ol>开始,中间包含一个或多个<li>元素,最后以</ol>结尾。

<ol>   
  <li>牛奶</li> 
  <li>奶酪</li>
</ol> 

创建一个输入框

创建一个文本输入框:

<input type="text">

注意:input输入框是没有结束标记的。

给输入框添加占位符文本

Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。

<input type="text" placeholder="this is placeholder text">

*创建一个表单

**
通过给form表单添加一个action属性,你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。

<form action="/url-where-you-want-to-submit-form-data"></form>

给表单添加提交按钮

让我们来给表单添加一个submit提交按钮,当点击提交按钮时,表单中的数据将会被发送到action属性指定的地址上
this button submits the form
举例:

<button type="submit">提交</button>

*给表单添加一个必填字段

**
当你设计表单时,你可以指定某些字段为必填项(required),只有当用户填写了该字段后,才可以提交表单。
在input元素中加上required属性就可以了,例如:

<input type="text" required>

创建一组单选按钮

单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label(标签)元素中。所有关联的单选按钮应该拥有相同的name属性
举例

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

在label元素上设置for属性,让其值与单选按钮的id属性值相等

<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>

创建一组复选框

每一个复选框都应该嵌套在它自己的label(标签)元素中。所有关联的复选框应该拥有相同的name属性
举例:

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

给单选按钮和复选框添加默认选中项

通过添加checked属性,你可以设置某个单选按钮或多选按钮被默认选中。为此,只需给input元素添加 “checked” 属性。 例如:

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

元素嵌套

div元素,也叫division(层)元素,是一个盛装其他元素的通用容器。用<div>来标记一个div元素的开始,用</div>来标记一个div元素的结束。把无序列表、有序列表和段落都嵌套进同一个div元素。

声明 HTML 文档的文档类型

你可以通过来告诉浏览器你使用的是 HTML 的哪个版本,"…" 部分就是版本的数字信息。对应的就是 HTML5。

定义 HTML 文档的标题和正文

html的结构主要分为两大部分:head、body。关于网页的描述都应该放入head标签,网页的内容都应该放入body标签。
比如link、meta、title和style都应该放入head标签

<!doctype html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
<html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值