【WEB前端开发】基础知识大总结(HTML5+CSS3)(上)

简介: 【WEB前端开发】基础知识大总结(HTML5+CSS3)(上)

一、转义字符

在HTML中,<、>、&(<、>用于区分标签,&用于转义)等特殊字符由于有特殊含义,在页面上可能无法正常显示,就需要在HTML文档中使用特殊转义字符来表示。


转义字符也可称为字符实体,对于同一个特殊字符,可以使用实体名称或者实体编号表示image.png


二、表单标签

HTML表单用于收集用户输入

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。


1、form标签

<form></form> 用于创建HTML表单,常用属性如下:


action:规定表单提时,表单数据提交的URL


method:规定用于发送form-data的HTTP方法,常用属性值为get、post



2、input元素

<input /> 元素是最重要的表单元素,根据input元素的不同type类型,表现形式也是不一样的image.png


3、label 标签

<label></label> 用于为input标签提供标注


点击label文本,浏览器会自动将焦点转到和标签相关的表单控件上


label标签的for属性值应当与相关元素的id属性值相同


示例

<form>
  <label for="like">点赞</label>
  <input type="radio" name="like" id="like" />
  <br />
  <label for="collect">收藏</label>
  <input type="radio" name="collect" id="collect" />
</form>

0.png


4、select 标签

<select></select> 用于创建下拉列表


select元素中的 <option></option> 标签用于定义列表的可选项


<select>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
</select>


0..png


5、button 元素

<button></button> 用于定义普通按钮


三、语义化标签

HTML标签语义化,简单来说,就是让标签有含义,给某块内容用上一个最恰当最合适的标签,使页面有良好的结构,页面元素有含义,更利于开发者、程序和其他设备对于标签的理解。


语义化在盲人软件、机器翻译等方面发挥着重要作用,同时搜索引擎会通过语义化标签增强文章的SEO搜索。


下表为部分常见的语义化标签:image.png


image.png

四、Head标签

head标签中一般可以包含以下标签:<title>、<style>、<script>、<link>、<meta>、<base>


常见Head头


1..png




1、title 标签

<title></title> 用于定义文档的标题


该标题会出现在浏览器窗口的标题栏或状态栏上


把该页面加入收藏夹或书签列表时,该标题为页面链接的默认名称


例:

<title>uiu的日志_uiuing's_CSDN博客-前端开发,后端开发,大数据领域博主</title>


2、link标签

<link /> 用于定义文档与外部资源的关系,最常用于链接样式表,也常用于给标题添加小图标


<link rel="icon" type="image/png" href="/static/images/favicon.ico">

<link /> 是空元素,仅包含属性,只能存在于head部分image.png

3、style标签

<style></style> 用于给文档引入 CSS 样式信息,将样式表包含在 style 开始与结束标签之间




4、script 标签

<script></script> 用于给页面添加脚本


可以直接在script开始和结束标签之间包含JavaScript脚本

<script>
  // JavaScript 代码
</script>

也可以通过script的src属性链接外部脚本文件

<script src="/static/js/main.js"></script>


5、mate 标签

<meta /> 提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词


name 和 content 属性通常一起使用,以键值对的方式给文档提供元数据,其中 name 的属性值作为元数据的名称,content 作为元数据的值


keywords 和 description 这两个名称使用频率最高,是搜索引擎优化的主要方式之一image.png

charset 属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等


http-equiv 属性可用于模拟一个HTTP响应头,与content属性搭配使用,常用属性值如下:


  • content-type :规定文档的字符编码,等同于charset属性设置字符编码
  • default-style :设置默认CSS样式表组的名称
  • refresh :设置文档自动刷新的时间间隔,content只包含一个正整数,则为重新载入页面的时间间隔(秒),content包含一个正整数和【url=XXX】格式的字符串时,该正整数则是重定向到指定链接的时间间隔(秒)




6、base 标签

<base /> 用于为页面中的所有相对链接设置默认URL或默认 target 属性


<base href="https://www.uiuing.com" target="_blank" />


五、CSS引用方式


CSS(层叠样式表)定义了HTML元素在页面中的样式、布局以及整个页面的布局。


CSS遵循W3C规范,实现了跨浏览器的标准化。



1、行内样式

直接使用HTML元素的style属性引入CSS样式

<p style="color: #000;">uiu</p>


2、内嵌样式

使用标签引入样式

<style>
  p {
  color: #000;
  }
</style>



3、外部样式

链接样式 导入确实比较方便,当然也是最常用的,但在比较大的工程之中我常使用 导入样式 ,我认为这可以让我的代码得到更方便的管理



3.1 链接样式

在 <head></head> 标签中,使用 <link /> 标签链接外部的CSS文件


link 标签的 href属性设置为目标链接的 CSS 文件路径,rel 属性设置为 stylesheet 表示链接样式表,type 属性设置为 text/css

<link rel="stylesheet" href="style.css" type="text/css" />


3.2 导入样式

使用 @import url() 引入CSS文件


在CSS文件中直接使用 @import url()


在HTML文件中需要在 <style></style> 标签中使用 @import url()


在HTML初始化时,@import url() 导入的CSS会被直接导入到 HTML 或 CSS 文件中,成为文件的一部分

<!-- HTML文件中导入 -->
<style>
  @import url(style.css);
</style>


/*
  CSS文件中导入
*/
@import url(style.css);

六、CSS背景属性

在前端开发过程中,为了页面的美观,往往都会给HTML元素添加背景,使用CSS(层叠样式表)背景属性能够在页面美化的同时,实现页面的表现与内容分离。image.png


1、background-size 属性

  • contain

保持图片纵横比例缩放背景图片,使背景图片能够在背景区域完全显示

有可能出现图片无法完全覆盖背景区域


  • cover

保持图片纵横比不变,最大程度覆盖背景区域

有可能导致背景图片部分区域无法显示



2、background-repeat 属性

  • repeat(默认)

允许水平和垂直方向重复(平铺)背景图片


  • repeat-x

只允许水平方向重复(平铺)背景图片


  • repeat-y

只允许垂直方向重复(平铺)背景图片



3、background 属性

简写属性可以在一个属性声明中设置一个或多个背景属性


background: #000 url('bannner.png') no-repeat cover;

上面代码的意思为:黑色背景、背景图片为:bannner.png、关闭平铺、保持图片纵横比不变


七、CSS文本属性

通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式,将页面的正文与标题区分开,同时能够丰富整个页面布局。


1、color 属性

用于设置文本的颜色,可设置的值有:


  • 颜色英文名,如 red
  • 十六进制值,如 #FFFFFF
  • RGB值,如 rgb(255, 0, 0)
  • rgba值 ,如 rgba(255, 0, 0, 0.9)



2、font-size 属性

用于设置文本字体大小,可以设置为绝对大小,单位为px ,也可设置为相对大小,单位为 rem 、em 等


字体大小未设置时默认字体大小为 16px



3、font-weight 属性

用于设置文本的粗细,可设置的值有:image.png


4、font-family 属性

用于规定文本使用的字体名或字体族名列表,字体名在列表越往前优先级越高。


如果浏览器不支持第一个字体,则会尝试下一个,以此类推

font-family: "PingFang SC","Hiragino Sans GB","Arial,Microsoft YaHei","Verdana","Roboto","Noto,Helvetica Neue","sans-serif";


5、text-align 属性

用于设置文本的水平对齐方式,可设置的值有


  • center(居中对齐)
  • left(左对齐)
  • right(右对齐)

文本方向是从左到右则默认左对齐,文本方向是从右至左则默认右对齐



6、line-height 属性

用于设置行间距,可设置的值如下


  • 数字 :行间距为当前字体大小乘此数字
  • 固定值 :设置固定的行间距,如20px
  • 百分比 :行间距为当前字体大小乘百分比


7、text-indent 属性

用于指定首行缩进值,可设置的值如下


  • 固定值 :设置固定首行缩进,如20px
  • 百分比 :首行缩进值为父元素宽度乘此百分比



8、letter-spacing 属性

用于设置字间距,设置固定值为字间距,如10px



9、word-spacing 属性

用于指定文本中单词之间的间距,设置固定值为单词间距,如10px



10、text-decoration 属性

用于设置文本的装饰线,是下表属性的简写image.png

/* 
  表示为黑色波浪形下划线 
*/
text-decoration: underline wavy black;


11、text-transform 属性

用于设置文本大小写字母,常用属性如下


  • uppercase :全部文本均为大写字母
  • lowercase :全部文本均为小写字母
  • capitalize :文本的每个单词首字母为大写字母



12、writing-mode 属性

设置文本在水平或垂直方向的排布方式


  • horizontal-tb :文本流在水平方向从上到下排列,文字方向为水平方向
  • sideways-lr :文本流在垂直方向,从下至上、从左至右排列
  • sideways-rl :文本流在垂直方向,从上至下、从右至左排列
  • vertical-lr :文本流在垂直方向,从上至下、从左至右排列,文字方向为水平方向
  • vertical-rl :文本流在垂直方向,从上至下、从右至左排列,文字方向为水平方向,跟古诗阅读顺序一致



13、white-space 属性

用于设置文本的空白符处理方式,属性值如下image.png


目录
相关文章
|
19天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
1天前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
48 25
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
52 6
|
2月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
45 5
|
2月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
151 6
|
4月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
57 1
前端基础(十七)_HTML5新特性
|
3月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
32 2
|
3月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
41 1