我的笔记。

■79

已于 2022-11-03 15:38:43 修改

阅读量947

点赞数

文章标签： html servlet 前端

于 2022-10-19 17:20:49 首次发布

本文链接：https://blog.csdn.net/qq_74286033/article/details/127335398

版权

HTML+CSS之拨云见日

一.创建HTML文件

1.1 建立一个新的文件夹，将文件夹名称后缀改为".html"。鼠标右键选择打开方式为笔记本，打开后开始创作。

1.2将创作好的文件保存，鼠标左键拖入浏览器开始解读。

二.使用vs code的快捷方法

2.1 下载vs code 并安装插件包改为中文简版

2.2 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 选择相同元素的下一个

2.3 web三大核心技术

HTML:结构 CSS:样式 JavaScript：行为

三、js互动（鼠标指着时闪烁）

颜色与斜体

四、初识HTML

1.1 HTML:超文本标记语言（HyperText Markup Language)是网页制作必备的编程语言。

超文本=文本内容+非文本内容（图片、视频、音频）

标记（也叫标签）:<单词> 例如：<footer>

语言：编程语言

1.2 写法：单标签：<header> 快捷键：单词+Tab=<单词>

双标签：<header></footer>

可嵌套

HTML 常见标签

标签的属性：修饰标签，设置当前标签的一些功能例：<标签属性="值" 属性2="值2">

例如：

2.1 HTML初始代码：每个.html文件都有的代码因为需要符合.html文件的官方\规范写法

!+tab键：可以快速创建.html文件的初始代码

<!DOCTYPE html> 文档声明：告诉浏览器这个一个.html文件

<html lang="en"> .html文件的最外层标签，包裹所有html标签代码

lang="en"表示为该网址为英文网址 lang="zh-CN" 表示为中文网站

<head>

<title>Document</title> 网页标题

</head>

<body>

（内容）

</body>

</html>

2.2 注释： 仅代码文件里可见快捷键：ctrl+/ 或鼠标选中后按 shift+alt+a

用法:

1.将暂时不用的代码保存

2.解释代码用途

1.2 HTML语义化：根据网页中内容的结果选择合适的HTML标签进行编写

五、HTML标签

1.1 标题（双标签）<h1>内容</h1>....<h6>内容</h6> 在一个.html文件中h1只能出现一次

段落（双标签）<p></p>

1.2 加粗(双标签) <strong>内容</strong>

斜体(双标签) <em>内容</em>

1.3 下标 <sub></sub>

上标 <sup></sup>

1.4 删除文本<del>内容</del>

添加文本<ins>内容</ins>

1.5 引入图片

img(单属性) src="引入图片地址"

alt="当图片出问题时显示提示文字"

title="图片提示"

width="宽度" height=“长度”

例：<img src="网址" alt="文字" title="文字">

相对路径：<img src=./文件名/文件名/文件名.jpg>

绝对路径：直接写出图片在电脑的地址例：E/ke/qf_dl201901/img/animal/dog.jpg 或网络地址

2.1 链接标签(双标签)<a></a>

href属性：链接地址例：<a href="网址"> 汉字</a> （点击汉字及可跳转至网址内容）

<a href="网址"> <img src="图片地址"alt=" "> </a> (点击图片跳转网址)

target 属性：当前页面打开链接 _self ，新窗口打开 _blank

例：<a href="网址"target="_self或_blank"> 汉字</a>

<title>之下加<base>改变默认状态 例：<base target="_blank">

2.2 跳转锚点: # id

<a href="#内容1">标题1</a>

<h2 id="内容1">标题1</h2>

例：

2.3 无序列表

<ul>

</ul>

<ul> 
    <li>小吃类</li>
<ul>
<li>粉条</li>
<li>煎蛋</li>
<li>米饭</li>
<li>青菜</li>
</ul>

</ul>

2.4 有序列表

<ol>

</ol>

2.5 定义列表（双标签）

<dl></dl>定义列表

<dt></dt>定义专业术语或名词

<dd></dd>对名词进行解释和描述

六、特殊符号

1.1 特殊符号

学习内容

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

</body>
<h2 id="顶部">回到顶部</h2>
    <a href="#内容">标题1</a>
    <a href="#内容2">标题2</a>
    <a href="#内容3">标题3</a>

        <h2 id="内容1">标题1</h2> <a href="#顶部">回到顶部</a>

    <header title="芝士互动">
    </head><h1>芝士最大的标题</h1></header>
    <body>
    <p><header title="芝士互动2号">
    <strong>芝士加粗</strong></p></header>
    
        <h2 id="内容2">标题2</h2> <a href="#顶部">回到顶部</a>

    <p><body><p>
    <header title="芝士互动3号">
    <em>芝士斜体</em></p></header>
     <p>芝士下标<sub>5</sub></p>
     <p>芝士上标<sup>8</sup></p>
    
        <h2 id="内容3">标题3</h2> <a href="#顶部">回到顶部</a>

    <p>芝士折扣价<del>250</del></p>
    <P>芝士<ins>下划线</ins></P></body>
    
</body>
</html>

2.1 字母*数字例：

<h></h>

h*3→ <h></h>

<h></h>

3.1 表格标签(可嵌套)

<table>: 表格的最外层容器语义化标签：tHead、tBody、tFood

<tr>: 定义表格行在一个table中，tBody可以多次出现，

<th>: 定义表头 tBody、tFood 只能出现一次

<td>: 定义表格单元

<caption>: 定义表格标题

3.2 表格属性

border：表格边框例： <table border=" 像素（数字）" cellpadding="像素（数字）">