前端网页学习1（概述与HTML部分）

最新推荐文章于 2022-02-22 21:16:38 发布

养羊得亿

最新推荐文章于 2022-02-22 21:16:38 发布

阅读量255

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_40551957/article/details/113456794

版权

前端网页学习（概述与HTML部分）

基础概念介绍

网页基本组成：
网站是网页的集合
网页是网站的一个页面，基本元素，HTML文件
网页由视频，文字等元素构成，后缀为.HTM. HTML
HTML：
超文本标记语言，非编程语言，而是标记语言。
超文本：
1超越文本限制，有图片声音等
2跳跃到其他文件（超链接文本）
常用浏览器**
ie/edge
火狐
谷歌
Safari
Opera
浏览器内核（渲染引擎）:
读取网页内容，整理信息，计算网页显示方式，显示页面。

Web标准三大组成部分
制定标准使不同浏览器显示相同网页。
结构：
对网页元素进行整理分类。HTML
表现：
设置元素的外观表现。css
行为：
网页模型的定义和交互的编写。JavaScript
最佳体验方案：
结构，表现，行为分离。即HTML文件，css文件，JavaScript文件。
编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

HTML学习

##HTML 语法规范

所有标签在<>里
大多对称

1.三种基础标签

文档类型生命标签，声明HTML版本（第一行，在HTML标签外）
Long语言语言种类 en英语 zh-CN中文（都可以，不严格）
Charest字符集 utf-8万国码（防翻译乱码）

2.常用标签

标题标签

<h1>标题内容</h1>

head 1—6
特点：大字体，独占一行，刷新后显示。

段落标签

<p>某段内容</p>

含义：Paragraph
特点：不加，word分段，网页不分。换行。不同段有空格。
换行标签

<br/>

含义：Break
特点：单标签。无行距变换。

文本格式化标签

<strong>内容</strong>粗体（推荐）
<b>内容</b>粗体
<em>内容</em>斜体（推荐）
<i>内容</i>斜体
<del>内容</del>删除线（推荐）
<s>内容</s>删除线
<ins>内容</ins>下划线（推荐）
<u>内容</u>下划线

盒子标签

<div>内容</div>

含义：Division
特点：无语义标签。装内容。一行一个，大盒子。

盒子标签

<span>内容</span>

含义：Span
特点：无语义标签。装内容。一行多个，小盒子。

图片标签

<img src=“图片upl”>

含义：mage图像。Src 标签属性
特点：单标签。当前目录。
其他属性
Alt 图片显示失败时，用文本显示。
Title 鼠标放在图片上的提示文本。
Height设置高度。
Width设置宽度。（高度，宽度只设一个时，另一个等比例）
Border 边框的宽度。（常用css）
注意点
标签写在属性前
属性没有顺序，中间有空格
键值格式

超链接标签

<a href=”跳转目标” target =””>文本或图像</a>

含义：Anchor
特点：
《文本图片》可以用视频等代替/超级网页元素链接
Href 目标超链接url
Target 打开方式。默认_self,_blank在新窗口打开
链接分类
外部链接：必须以HTTP开通

<a href="http://www.baidu.com">百度外部链接</a>

内部链接：网站内部

<a href="../网页学习001.html">内部链接</a>

空链接：#

<a href="#">空连接</a>

下载链接：下载文件Exe或zip文件。

<a href="../网页学习001.png">下载链接（图片代替）</a>

锚点链接：快速跳转到本页面某位置

<a href="#id">锚点</a>

注释标签

<!—内容-- >

选择某行Ctrl+/
特点：
不在页面显示,单标签

特殊字符

空格：&nbsp；
大于小于号：&gt；&lt；

表格标签

基础元素：
<table><tr><td></td></tr></table>表行单元格
表头元素：
<th>不完全等同于<td>特点是居中加粗
表格属性：
对齐方式：align:left,center,right
边框：border:1,””
元素内格空隙：cellpadding:默认1
元素间空隙：cellspacing:默认2
宽度：Width
高度：Height
合并单元格：
跨行合并：rowspan=“合并单元格个数”
跨列合并：colspan=“合并单元格个数”
删除多余单元格：（table里css中设置）
特点：
展示数据，休整页面。双标签

列表标签

无序列表（重点）

<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>

特点：
没有顺序
内部只有<li>,无文字或其他标签
<li></li>是一个容器，可以放任何标签，文字
无序列表有自己的样式属性，但常用css

有序列表

<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>

特点：
自己显示顺序
内部只有

,无文字或其他标签
<li></li>是一个容器，可以放任何标签，文字
有自己的样式属性，但常用css
自定义列表
```
<dl>
<dt>列表标题</ dt >
<dd>列表项1</ dd>
<dd>列表项2</ dd >
</dl>
```
特点：
没有顺序
内部只有< dt >,无文字或其他标签
<dt>和<dd>是一个容器，可以放任何标签，文字
有自己的样式属性，但常用css

表单字符

特点：
和用户进行交互，想服务器提供数据
基础元素：
1.表单域 2.各种表单元素控件 3.提示
表单域：
输入表单元素的范围。每个表单域一个提交，把内容交给后台服务器。
```
<form action=”url” method=”提交方式” name=”表单域名称”>
</form>
```
各种表单提示：
直接输入文字
```
提示内容
```
表单元素/表单控件:
1.input
```
<input type=”属性值”name=“名字“/>
```
用于收集用户信息，单标签。
Type的值不同，输入字段可以是文本框，复选框，单选，按钮等。
Button 按钮，用于启动Javascript脚本
Checkbox 定义复选框（重复选择）
File 定义输入字段和浏览按钮，供文件上传。
Hidden 定义隐藏的输入字段
Image 定义图像形式的提交按钮
Password 密码字段，该段内容会掩码
Radio 单选
Reset 重置
Submit 提交
Text 单行输入字段默认20个字符
Name 区别不同input(单选，复选有相同name)。
value 设置选择框的值，或输入的默认值。
checked 初次被加载（默认选中）
checked=“checked“
maxlength表单输入最大长度
2.select
优点：节约空间
Selected=”selected”默认选中
```
<select>
<option>1</option>至少一个
<option>2</option>
<option>3</option>
</select>
<textarea>
```
3.多行文本框
```
<textarea rows=“5“ cols=”10“>默认文字</textarea>
```
标注标签

绑定一个元素，点击label内部文本，会选中元素
```
<label for=”sex”>男</label>
<input type=text id=”sex”>
```
3.HTML学习总结

新人学习，如有不当之处，欢迎指正！！