响应式网页设计-HTML（标记语言）相关记录_响应式网页设计是用什么语言-优快云博客

本文介绍了HTML的基本用法，包括文档结构、常用标签如div、label、p等，以及如何使用内部链接、图片链接、列表和表单元素等内容。

文章目录

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

标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
“for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。

<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">
其他规则语法同单选框一致