HTML-基础篇

最新推荐文章于 2024-08-05 17:22:58 发布

rfalcon

最新推荐文章于 2024-08-05 17:22:58 发布

阅读量181

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/rfalcon/article/details/106128888

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML基础知识自学笔记

【注】VS code编辑环境

快捷键

	ctrl+s  保存
    ctrl+a  全选
    ctrl+x、ctrl+c、ctrl+v  剪切、复制、粘贴
    ctrl+z、ctrl+y  撤销、前进
    shift+end   从头选中一行
    shift+home  从尾部选中一行
    shift+alt+↓ 快速复制一行
    alt+↑或↓    快速移动一行
    tab 向后缩进
    tab+shift   向前缩进
    多光标 alt+鼠标左键
    ctrl+d  选择相同元素的下一个
    创建标签的快捷键：tab + 单词 -> <单词>

HTML注释

快捷键（ ctrl+/ 或者 shift+alt+a）

标题与段落

h标签 h1-h6（h1在文中只能出现一次，h5-h6一般不用） <h1></h1>
p标签 <p></p>

文本修饰标签

strong：表示强调，会对文本进行加粗 <strong></strong>
em：表示强调，会对文本进行斜体 <em></em>
sub：下标文本 <sub></sub>
sup：上标文本 <sup></sup>
del：删除文本 <del></del>
ins：插入文本 <ins></ins>

图片标签

<img src="" alt="" title="" width="" height="">
src：图片的路径地址
alt：图片加载不出来显示的提示文字
title：鼠标移到图片上显示的描述文字
width：图片的宽度
height：图片的高度

链接

<a href="" target=""></a>
定义一个死链接：<a href="javascript:void(0);">死链接，没反应</a>
href:用于指定超链接目标的URL
target：规定在何处打开链接文档

值	描述
_blank	在新窗口打开链接
_self	在同一窗口打开链接
_parent	在父窗口打开链接
_self	在浏览器的整个窗口打开链接

在head头部写上<base target="_blank">会使body中所有的链接在新的窗口打开

锚点

#号+id属性

<a href="#html">html</a>
<h2 id="html">html超文本标记语言</h2>

#号+name属性

<a href="#html">html</a>
<a name="html"></a>
<h2>html超文本标记语言</h2>

特殊符号

含义	特殊字符代码
空格	` `
版权	`©`
注册商标	`®`
大于号	`>`
小于号	`<`
和号	`&`
人民币	`¥`
摄氏度	`°`

无序列表

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

ul：列表的最外层容器
li：列表项
【注】ul和li是组合出现的，他们之间不能有其他标签

有序列表

<ol type="1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>

ol：列表的最外层容器
li：列表项
type属性：改变前面标记的样式（一般是css去控制，有1、a、A、i、I等样式，可以不从头开始，例如：type="c";，从字母c开始排序）

定义列表

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

dl：定义列表
dt：定义专业术语或名词
dd：对名词进行解释和描述

表格标签、表格属性

<table border="1" cellpadding="30" cellspacing="30">
	<caption>天气预报</caption>
        <tHead>
            <tr align="right">
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr valign="top">
                <td rowspan="2">2019年1月1日</td>
                <td>白天</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr valign="bottom">
                <td rowspan="2">2019年1月2日</td>
                <td>白天</td>
                <td><img src="./img/tianqi_1.png" alt=""></td>
                <td>有小雨，出门请带伞</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./img/tianqi_2.png" alt=""></td>
                <td>有小雨，出门请带伞</td>
            </tr>
        </tBody>
        <tFood>
        </tFood>
    </table>

table：表格最外层容器
th：定义表头
tr：定义表格行
td：定义表格单元
caption：定义表格标题
语义化标签：tHead、tBody、tFood（一个table中，tBody可以出现多次，tHead、tFood只能出现一次）
border：表格边框
cellpadding：规定单元边沿与其内容之间的空白
cellspacing：规定单元格之间的空白
rowsqan：合并行
colspan：合并列
align：左右对齐方式（left、center、right）
valign：上下对齐方式（top、middle、bottom）

表单标签

<form action="http://www.baidu.com">
    <input type="text" placeholder="请输入用户名">
</form>

form：表单的最外层容器
input：标签用于搜集用户的信息，根据不同的type属性，展示不同的控件
普通文本输入框<input type="text" placeholder="请输入用户名">
密码输入框：<input type="password" placeholder="请输入密码">
单选框

<input type="radio" name="gender">男
<input type="radio" name="gender">女

复选框

//checked表示被选中；disabled表示不可以被选中
<input type="checkbox" checked>上海
<input type="checkbox" checked>北京
<input type="checkbox" disabled>深圳
<input type="checkbox" disabled>广州

上传文件
<input type="file" multiple> //multiple表示一次可以上传多个文件
提交按钮
<input type="submit">
重置按钮
<input type="reset">
多行文本框
<textarea cols="30" rows="10"></textarea>
select+option 下拉菜单

<select>
	<option selected disabled>请选择</option>//selected表示被选中;disabled表示不可选
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
</select>
<select size="3">//size值指的是让下拉菜单显示的项数
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
</select>
<select multiple>//设置多选
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
</select>

label辅助标签，让可选的范围变大

<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>

div（块）

div全称为division，“分割、分区”的意思，<div></div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div></div>标签中，<div></div>中还可以嵌套多层<div></div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局