HTML基础教程-CSDN博客

本文链接：https://blog.csdn.net/qq_50347429/article/details/109629692

HTML学习（一）

1.域名

www.baidu.com就是一个域名，它代表一个ip地址。域名需要用钱买！！例如小米的新域名mi.com曾花费数百万美元。在浏览器输入ip地址后，计算机向服务器发送请求，服务器响应后将网页源代码发送到浏览器，浏览器将代码转化为页面，展示给用户。目前，转化代码最块的是谷歌浏览器。

2.网页代码

head为一个网页的头部

<head>
		<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />
		<meta charset="utf-8" />
		<title>腾讯</title>
	</head>

body为网页的主体,利用img标记的src标记属性可以使用已经保存在项目文件中的图片，title可以显示文本，即鼠标悬停在照片上所显示的内容

<body>
		  <img src="img/BE3137222D1A27EDDA557E33CE74E809.jpg" title="https://www.qq.com/?fromdefault" width="300px"/>
	</body>

（1）标签

单书名号包裹的关键字叫标记：分为单标记或双（对）标记。例如-单标记：<link> 双标记：<head>...........</head>

title,width都称为标记属性，一个标记可以有多个属性，属性不分前后，用空格隔开，双引号内为属性值。

<行内元素>：img a b(黑体) i（斜体） del（划掉）

行内元素，高度，宽度包裹内容,不会单独成行，不能居中

<块级元素>：p div h(1-6)(变大)

块级元素，高度包裹内容，宽度等同于富标记，可以居中

 <img src="img/BE3137222D1A27EDDA557E33CE74E809.jpg" title="https://www.qq.com/?fromdefault" width="300px"/>
		  <a href="www.baidu.com" target="_blank">百度</a><!--行内元素，高度，宽度包裹内容,不会单独成行-->
		  <p style="text-align: center;">河南工业大学</p><!--块级元素，高度包裹内容，宽度等同于富标记，可以居中-->
		  <div>郑州大学</div>
		  <b>郑州</b>
		  <i>郑州</i>
		  <del>郑州</del>
		  <!--hn,1-6-->
		  <h1>郑州</h1>
		  <h6>郑州</h6>

（2）表格

<有序表格> : <ol> start：序号 type：类型

<ol start="2" type="I">
		  	<li>语文</li>
		  	<li>数学</li>
		  	<li>英语</li>
		  </ol>

<无序表格>：<ul>

<ul  type="square">
		  	<li>语文</li>
		  	<li>数学</li>
		  	<li>英语</li>
		  </ul>

(3) 表单

<form>定义表单，用于收集用户输入。

<!--向服务器提交表单-->
		<form action="">
			<!--隐藏框-->

<input>标签：type属性：

单选

<input type="radio" name="sex" id="male"/><label for="male">男</label>
			<input type="radio" name="sex"  id="female"/><label for="female">女</label>

多选

<input type="checkbox" name="hobby" id="lanqiu"/><label for="lanqiu">篮球</label>
			<input type="checkbox" name="hobby"  id="zuqiu"/><label for="zuqiu">足球</label>
			<input type="checkbox" name="hobby" id="pingpang"/><label for="pingpang">乒乓</label>

按钮

<!--按钮-->
			<input type="button" value="登录" />
			<input type="submit" value="提交"/>
			<input type="reset"  value="重置"/>

下拉列表：由一个select标签和多个option子标签组成

<select>
				<option>请选择</option>
				<option>篮球</option>
				<option>足球</option>
				
			</select>

文本域：textarea标签：文本域标签，双标签

frameset标签：框架集标签，用于规定框架集中有多少个框架窗口或框架集，•注意：frameset标签不能与body标签一起使用。

<frameset rows="20% ,80%">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame src="right.html" name="right" />
		</frameset>

iframe标签：•iframe标签：在页面中嵌入另外一个页面, 该标签为双标签，可以与body同用

<body>
		<iframe src="http://www.baidu.com/"></iframe>
		<iframe width="430" height="29" frameborder="0" scrolling="no"></iframe>
	</body>