HTML

HTML

前言

html选择标签，不是从外观去选择，而是从语义

例如：一个html文件只能有一个<h1>

HTML基本结构

快捷键！+tab

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

标记

1.头标记head

title：网页标题

meta：辅助信息标记，向浏览器传递一些信息

字符编码，网页刷新，SEO相关

2. 文档主体标记body

3. 文档结构标记

1）标题标记

<h1>到<h6>表示页面中的关键词（标题），以使用时有以下的注意事项！

<h1>代表最重要的，<h6>代表相对最不重要的，因此，根据这个递减，适当安排关键词；

2）段落与换行标记

<p>：段落

<br />：换行

<br>标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而<p>标记在换行的时候另起了一新的段落。

3）div与span

div：表示一个盒子或容器

span：没有特定的语义，通常用于样式的应用

4）<hr />：分隔线

4. 文字标记

<b>：加粗

<strong>：强调

b和strong的区别就在于前者是的语义为与众不同，而strong表示强调，因此应该根据使用场景来选用。

<i>：斜体

<em>：次级强调

我们可以看到下表中有部分的文本标记，我们只要按照标记的语义来使用即可，比如大段的引用我们可以用<blockquote>标签，代码用<code>标签，缩写用<abbr>标签等等。

文字标记 语义
<blockquote> 长引用
<q> 短引用
<abbr> 缩写
<address> 作者联系信息
<pre> 预格式化的文本,常用于程序代码
<code> 定义计算机代码文本。
<del> 删除的文本
<sub> 上标
<sup> 下标

5. <a>:超级链接标记

<a href="链接位置" title="链接描述" target="目标">链接文字</a>
  1. 学会使用邮件链接：
<a href="mailto:test@qq.com">发送邮件</a>
  1. 页面链接的锚点：
<a href="#top">回到顶部</a>  <div id="top">顶部的链接</div>
  1. 给链接增加 鼠标提示：
<a title=“点击查看胡悦的详细信息”>查看</a>
  1. 理解链接的不同打开方式:
<a href=“” target=“_top/_self/_blank”></a>

6. img图片标签

<img src="图片位置" alt="图片描述" width="宽度" height="高度" />

7. 数据列表标记

ul、ol、li

<ol>
    <li>巴西</li>
    <li>阿根廷</li>
    <li>德国</li>
</ol>
<ul>
    <li>巴西</li>
    <li>阿根廷</li>
    <li>德国</li>
</ul>

示例
dl、dt、dd

<dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

捕获.JPG

8. 表格标记

快捷键table>tr*3>td*4{0000}

水平合并（colspan=需要合并的数量）

垂直合并（rowspan=需要合并的数量）

9.转义字符

文本字符 html字符
空格  
< <
> >
" "
& &

10.注释

<!-- 注释内容 -->

11.表单

  • 表单标记
<form action="表单提交的处理程序地址" method="表单提交方式(post/get)" name="表单名称"></form>
  • 文本框
<input type="text" name="控件名称" value="文本框输入值" placeholder="提示信息" disabled readonly required auotfocus />
  • 密码框
<input type="password" name="控件名称" placeholder="提示信息"/>
  • 单选按钮：同一组单选按钮使用同一命名
<input type="radio" name="控件名称" value="控件值" checked />
  • 复选按钮
<input type="checkbox" name="控件名称" value="控件值" checked />
  • 下拉列表
<select name="控件名称" multiple="multiple" size="数值">    <option value="控件值" selected>选项</option></select>
  • 多行文本框
<textarea name="控件名称" cols="列数" rows="行数"></textarea>
  • 隐藏控件
<input type="hidden" name="控件名称" value="控件值" />
  • 普通按钮
<input type="button" value="按钮文字" /><button type="button">按钮文字</button>
  • 发送按钮
<input type="submit" value="按钮文字" /><button type="submit">按钮文字</button>
  • 重置按钮
<input type="reset" value="按钮文字"><button type="reset">按钮文字</button>

12. 补充

label标签的for属性可以和input标签的id属性绑定在一起

<label for="pwd">密码</label>
<input type="password" id="pwd">
posted @ 2021-09-23 10:15  步行街  阅读(111)  评论(0)    收藏  举报