学习HTML（1）

最新推荐文章于 2024-07-19 15:20:42 发布

林夕m0420

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量98

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/weixin_42216857/article/details/106796529

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端小白的重新开始

过了那么久，才终于渐渐的明白基础知识有多么的重要。决定的事情一定要坚持下去呀。其实写在这里不是为了证明什么，而是真正的找到一个东西来约束自己（因为确实感觉自己不是一个非常自律的人），也是希望在过了一段时间后能给自己留下点什么东西。事无巨细，比较基础。如果有错误和不足的地方也请大家多多的指教 ^ ^ !
前端学习从HTML开始啦！！

1.什么是HTML

HTML是用来描述网页的一种语言
超文本标记语言（Hyper Text Markup Language）
不是编程语言，是标记语言
标记语言是一套标记标签
HTML使用标签来描述网页

2.HTML文档=网页

HTML文档描述网页
HTML文档包含HTML标签和纯文本
HTML文档也被称为网页
Web浏览器的作用是读取HTML文档，以网页的形式显示，不会显示HTML标签

3.HTML编辑器

推荐使用记事本
空白格式编辑格式如下

<!DOCTYPE HTML>
<html>
	<body>
		<h1>标题字</h1>
	</body>
</html>

4.HTML语法

(1)标题

搜索引擎使用标题为网页结构和内容编写索引

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

(2)段落

<p>段落</p>

(3)HTML链接

<a href="www.baidu.com"></a>

(4)HTML图像

src中写图片URL地址
alt属性中：一串可以预备替换的文本

<img src="one.jpg" alt="有点问题啦！！"/>

(5)HTML元素

是指从开始标签到结束标签的所有代码
开始标签（开放标签），结束标签（闭合标签）

(6)嵌套的HTML元素

大多数HTML元素可以嵌套

(7)空的HTML元素

没有关闭标签的空元素，比如<br>推荐使用<br />

(8)尽量使用小写标签

(9)HTML水平线

<hr/>

(10)HTML注释

<!--这是注释-->

HTML的属性

(1)外部样式

<head>
	<link rel = "stylesheet" type = "text/css" helf="mystylle.css">
</head>

(2)内部样式

<head>
	<style tyle = "text/css">
		body{background-color:red}
		p{margin-left:20px}
	</style>
</head>

(3)内联样式

当特殊样式需要应用到个别元素时，就可以使用内联样式。方法是在相关标签中使用样式属性。(通常也被称为行内样式)

<p style = " color:red; margin-left:20px ">一个段</p>

(4)HTML表格

<tr>定义行，<td>定义每行单元格的数量
border边框定义：若不定义，不显示
表头用<th>定义（文本粗体居中）
设置空单元格时，不会显示边框（可以使用&nbsp占位解决）

<table>
	<tr>
		<th>Heading</th>
		<th>A Heading</th>
	</tr>
	<tr>
		<td>one</td>
		<td>two</td>
	</tr>
	<tr>
		<td>&nbsp</td>
		<td>two</td>
	</tr>
</table>

(5)HTML列表

无序列表

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

有序列表<ol> <li>...</li> </ol>
列表内部可以使用段落，换行符，图片，链接以及其他列表…
自定义列表
dl开始，dt表头，dd内容

<dl>
	<dt>Coffee</dt>
	<dd>Black</dd>
	<dt>Milk</dt>
	<dd>White</dd>
</dl>

(6)`<div>`块元素

以新行来开始，例：<h1>,<p>,<ul>,<table>

(7)`<span>`内联元素

不会以新行来开始，例：<b>,<td>,<a>,<img>,<span>

(8)HTML类

class,方便为它设置css样式
可以为相同的div元素设置相同的类
也可以为行内元素设置类

(9)HTML布局

(10)响应式web设计

RWD（Responsive Web Design）
可以改变尺寸传递网页
对于平板和移动设备是必须的
Bootstrap响应式设计的方法，实用现成的Css框架

(11)HTML内联框架

<iframe src = "URL"></iframe>

在页面内设置其他网页
可以设置宽（width）和高（height）
frameborder = 0 移除边框

(12)表单

用于不同类型的用户输入

<input type= "text">文本输入（默认20个字符长）
<input type= "password">密码输入
<input type= "radio">单选按钮输入
<input type= "submit">提交按钮
<select> <option>...</option> <select>下拉列表
<textarea>输入多行字段
<button>按钮
<input type= "checkbox">复选框
HTML5新加表单元素
<datalist> <keygen> <output>
<datalist>定义选项列表：用户会在输入数据时看到预定义选项的下拉列表，input元素的list属性必须引用datalist元素的id属性

<form action = "action_page.php">
	<input list = "one">
	<datalist id = "one">
		<option>baidu</option>
		<option>sougou</option>
	</datalist>
</from>

H5的其他输入类型：
color,date,datetime,datetime-local,email,month,number,range,
search,tel,time,url,week

(13)action 属性

设置submit提交到的页面位置
若省略action，会被设置为上传到当前页面

<from action = "index.html">

(14)method属性

规定在提交表单时所用的HTTP方法（GET或POST）

(15)使用GET方法

表单提交是被动的，并且没有敏感信息
使用时，数据在页面地址栏可见
适合少量数据，浏览器会设定内容限制

(16)使用POST方法

表单正在更新数据
包含敏感信息
更加安全，提交数据时在地址栏中不可见

林夕m0420

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习HTML（1）

前端小白的重新开始过了那么久，才终于渐渐的明白基础知识有多么的重要。决定的事情一定要坚持下去呀。其实写在这里不是为了证明什么，而是真正的找到一个东西来约束自己（因为确实感觉自己不是一个非常自律的人），也是希望在过了一段时间后能给自己留下点什么东西。事无巨细，比较基础。前端学习从HTML开始啦！！1.什么是HTMLHTML是用来描述网页的一种语言超文本标记语言（Hyper Text Markup Language）不是编程语言，是标记语言标记语言是一套标记标签HTML使用标签来描述网页2
复制链接

扫一扫