初识HTML
HTML(超文本标记语言)是一种用于创建网页的标记语言,它不是一种编程语言,不像python,本身并没有什么逻辑可言。
最基本的HTML文档结构:
<!DOCTYPE html> <!--声明为HTML文档类型-->
<html lang="en"> <!--HTML页面的根元素-->
<head> <!--定义了HTML文档的开头部分。包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。-->
<meta charset="UTF-8">
<title>Title</title> <!--title元素描述了文档的标题-->
</head>
<body> <!--包含可供用户可见的页面内容-->
</body>
</html>
HTML常用标签
标签语法:
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
pycharm中的代码为:
</head>
<body>
<a name="top">这是顶部</a>
<b>加粗的内容</b>
<i>斜体</i>
<u>下划线</u>
<br> <!-- 换行-->
<s>删除</s>
<p>段落标签</p> <!-- 独占一个段落-->
<!--<h1>标题</h1>-->
<div style="">
<a href="http://www.baidu.com" target="_blank">点我</a>
<hr> <!--姨妈射线-->
<img src="下载.jpg" alt="死亡小学生..." width="200" height="200" title="柯南">
</div>
<hr>
<div style="">
<p>真相只有一个...</p>
</div>
<hr>
<ul type="square">
<li>老王</li>
<li>老刘</li>
<li>老赵</li>
</ul>
<ol start="a">
<li>王八</li>
<li>王久</li>
<li>王十</li>
</ol>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<a href="#top">回到顶部</a>
</body>
</html>
浏览器效果图:
head内常用标签:
<tilte></title>
:定义网页的标题
<style></style>
:定义内部样式表
<script></script>
:定义JS代码或引入外部JS文件
<link/>
:引入外部样式表文件
<meta/>
:定义网页元信息
body基本标签:
<!--内联标签,不独占一行,不能不能包含块级标签,只能包含内联标签-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<img src="1.png" alt="这是个美女..." width="200" height="200" title="美女"> #src属性='图片路径' alt属性='图片加载失败的提示信息' title='鼠标悬浮提示信息'(title属性不单单是img标签的)
<a href="">百度</a> #显示普通文本。写了href属性,但是里面没有值,效果:有特殊效果,文字有颜色,有下划线,点击会刷新当前页面;
有属性有值的:<a href="http://www.baidu.com" target="_blank">百度</a>,跳转到href属性指定的网址,
target="_blank":在新的标签页打开,默认是在当前标签页打开:target="_self"
<!--块级标签,独占一行,可以包含内敛标签和某些块级标签-->
<p>段落标签</p> #段落之间会空一行,标签内部不能包含块级标签和p标签
<h1>标题1</h1> #h1~h6为标题标签,其中h1最大,h6最小
<br> #换行
<hr> #水平线
<!--锚点:当浏览至网页的底部时单击锚点回到网页顶部-->
<!-- 设置锚点 方式1 -->
<a name="top">这是顶部</a>
<a href="#top">回到顶部</a>
列表标签:
<!--无序列表-->
<ul type="square">
<li>老王</li>
<li>老刘</li>
<li>老赵</li>
</ul>
<!--
无序列表type属性对应的值:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
-->
<!--有序列表-->
<ol start="a">
<li>王八</li>
<li>王久</li>
<li>王十</li>
</ol>
<!--
有序列表type属性对应的值:start属性是从数字几开始
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
-->
<!--标题列表-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
table标签:
<table border="1" cellspacing="10" cellpadding="20"> #border: 表格边框;
cellpadding: 内边距 (内边框和内容的距离);cellspacing: 外边距.(内外边框的距离)
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">王八</td> #colspan: 单元格横跨多少列(即合并单元格)
<!--<td>18</td>-->
<td rowspan="3">篮球</td> #rowspan:单元格竖跨多少行
</tr>
<tr>
<td>王久</td>
<td>18</td>
<!--<td>篮球</td>-->
</tr>
<tr>
<td>王十</td>
<td>18</td>
<!--<td>篮球</td>-->
</tr>
</tbody>
</table>
form表单标签和label、input标签:
form表单标签把前端用户产生的数据传输到后端web服务器。
<body>
<!--action属性:值是一个网址,将数据提交到哪个网址去;
method属性:提交方法,默认是get,效果是在网址上可以看到提交的数据-->
<form action="http://127.0.0.1:8080" method="get">
<label for="username">用户名:</label>
<!--用户名:-->
<!--input文本输入框,input标签如果想将数据提交到后台,那么必须写name属性-->
<input type="text" id="username" name="username">
<label>
密码 <input type="password" name="password">
</label>
<div>
<label>
性别:
<!--input选择框,必须写name属性和value属性,name值相同的算是同一组选择框-->
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
</label>
</div>
<div>
<label>
爱好:
<input type="checkbox" name="hobby" value="1" checked>抽烟
<input type="checkbox" name="hobby" value="2">蹦迪
<input type="checkbox" name="hobby" value="3">渣男大波浪
<input type="checkbox" name="hobby" value="4">渣女锡纸烫
</label>
</div>
<div>
<label>
出生日期:
<input type="date">
</label>
</div>
<div>
<!--想通过form表单标签来提交用户输入的数据,必须在form表单里面写
你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: botton按钮-->
<input type="submit" value="提交">
</div>
<div>
<input type="reset" value="重置">
</div>
</form>
</body>
select标签:
<form action="http://127.0.0.1:8080" method="get">
<label >
<select name="" id="" multiple> <!--multiple属性:多选;name属性提交数据时
的键,option标签中value属性的值需要写,是将来提交数据的真实数据-->
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</label>
</form>
textarea标签:
多行文本输入框。
<label>
<!--name:名称;rows:行数 #相当于文本框高度设置;cols:列数 #相当于文本框长度设置;
disabled:禁用;maxlength:显示字符数,例如:maxlength='10' 最多输入十个字符-->
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
</label>