HTML基础-CSDN博客

本文链接：https://blog.csdn.net/yinjun3215/article/details/107731096

HTML基础 1

页面的构成

html 毛坯房静的
css 装修刷粉色的油漆
javascript 智能家居动的

页面的分类

静态页面
- 内容是写死的不变的
- 不请求数据库
动态页面
- 千人千面
- 京东个人中心每个人的页面是不一样的
- 请求数据库

学习过程

先写静态页面
再写动态页面

html

hyper ext mark language 超文本标记语言不需要编译由浏览器解释执行

开发工具

vscode 首选这一种
notepad++
sublime
hbuilder

学习标签

记住标签
标签不能自己造
书写标签的时候要用英文半角
标签的分类
- 单标签 <标签名属性=“属性值” 属性1=“属性值1” 属性n=“属性n” >
- 双标签 <标签名属性=“属性值” 属性1=“属性值1” 属性n=“属性n”>内容</标签名>
属性值可以是单引号可以是双引号属性必须写在标签里
标签可以嵌套一个标签可以套另外一个或者多个标签

全局架构标签

<!DOCTYPE html> #文档类型  html5  html4 
<html lang="en">  #根标签 
<head> 头部 
    <meta charset="UTF-8"> #告诉浏览器 我用utf-8编码来解释这个页面 
    <title>Document</title>文档标题
</head>
<body>  #主题内容标签 
    
</body>
</html>

注释

ctrl+/ 这是注释快捷键   

<!-- 这是注释  -->

title 标签

显示在窗口的标题栏上

设置字符集

浏览器用哪种编码解读文档 html页面本身有编码格式这两个必须一致才行否则乱码

<meta charset="utf-8">  #设置字符集  为了不让页面显示乱码

body

显示内容

常用属性

text 文本的颜色
bgcolor 背景颜色
topmargin 上外边距距离上面的距离
leftmargin 左外边距距离左边的距离
background 背景图片显示图片背景色就不显示

###　全局属性

每个标签都可以有的属性

id id不能重复
class 使用class 可以指定多个标签有相同的样式
style 设置标签的样式
name 表单的时候用到

常用标签

h1~h6 标题 1~6 从大到小一般设置一个
hr 水平分割线单标签
- width 宽度 100 不带单位百分比
- align 默认是居中可以left right
p 段落标签成对标签
br 换行标签单标签
nobr 双标签不换行显示不下有滚动条
pre 标签无论空格还是换行都正常显示
b strong 加粗
i em 倾斜
u 下划线
sup 上标比如 a² sub 下标
blockquote 会从正常的文本中进行分离留有左右边距

实体引用

&nbsp;  空格  
&lt;  小于号  
&gt; 大于号 
&amp; & 
&quot; 双引号 
&apos; 单引号

列表

1.有序列表

ol/li

type 默认是1234 还可以有 a A i I
start 指定从第几开始

无序列表

ul/li

自定义列表

dl/dt/dd

超链接 a

url 统一资源定位符

https://www.baidu.com:80/s?wd=%E6%9C%80%E8%BF%91%E8%8B%8D%E8%80%81%E5%B8%88%E5%BF%99%E4%BB%80%E4%B9%88%E5%91%A2
https://www.aliyun.com/product/ecs?
第一部分: https 协议  http协议 ftp magnet 磁力链接  
第二部分: www.baidu.com 主机地址 也叫服务器的地址  可以是域名也可以是 ip地址 
第三部分：端口号   http 80 https 443 mysql 3306 redis 6379  mongodb 27017 ssh 22  ftp 21 
第四部分:/product/ecs?  /后面 ?前面/ 路径   请求文件的路径 
第五部分: #2_3 这个叫锚点 
第六部分: 从?到#这一部分叫做 请求参数 wd=%E6%9C%80%E8%BF%91%E8%8B%8D%E8%80%81%E5%B8%88%E5%BF%99%E4%BB%80%E4%B9%88%E5%91%A2 请求参数  
wd=百度百科&rsv_spt=1&rsv_iqid=0x8b743dda00133a64&issp=1&f=3&rsv_bp=1 #多个参数用&符号隔开

语法

<a href="http://www.qfedu.com">千锋教育</a>

http:// 或者 https://记得写  
a标签中间的内容一定记得写

href 跳转url地址
title 鼠标放上去以后提示内容
target
- _blank 新窗口打开
- _self 当前窗口打开默认

锚点

定义锚点  
<a href="#锚点的名字">跳转到锚点的名字</a>  用户点击的是这个 

本页面的锚点  
<a name="锚点的名字"></a>   跳转到这里来 

#跨页面的锚点
<a href="https://baike.baidu.com/item/%E5%B0%A4%E6%96%87%E5%9B%BE%E6%96%AF%E8%B6%B3%E7%90%83%E4%BF%B1%E4%B9%90%E9%83%A8#4">尤文图斯球队主场</a>

img 标签

语法

<img src="" alt="" title=""  border="" width="" height="" />

src 图片的来源可以是相对路径也可以是绝对路径
- 相对路径
  - …/2.jpg 上一级目录下面的2.jpg
  - ./1.jpg 当前目录下面的 1.jpg
title 鼠标放上去提示的文字
alt 如果图片不显示那么会显示alt的内容
border 图片的边框
width 图片的宽度一般设置一个等比例缩放
height 图片的高度

视频 video

<video src="二哈.mp4" controls="true" loop="true" autoplay="true" width="500" height="500"></video>

controls 显示控制面板
loop 是否循环播放
autoplay 是否自动播放
width 宽度
height 高度
src 视频的来源绝对路径相对路径

音频 audio

- controls 显示控制面板  
- loop 是否循环播放 
- autoplay 是否自动播放 
- src 视频的来源  绝对路径  相对路径