HTML基础

目录

一、HTML概述

什么是html？

二、HTML常用标签

标题标签

段落标签

换行标签

横线

加粗

斜体

图片标签

链接标签

块元素

内联元素

三、列表

什么是列表

无序列表

有序列表

自定义列表

四、表格

五、表单

定义

应用

action:提交到的路径

method:提交的方式

type:输入值的类型

---

一、HTML概述

什么是html？

        html是一个超文本的标记语言

二、HTML常用标签

标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落标签

<p></p>

换行标签

<br />

横线

</hr>

加粗

<strong></strong>

斜体

<em></em>

图片标签

<img src="图片路径" alt="图片无法正常显示的提示">

链接标签

超链接：从一个页面跳转到另一个页面或位置

<a href="需要跳转到的页面路径">显示的内容</a>

锚链接：从页面的某个点点击之后跳转到另外指定的地方【可以使同页面也可以是其他页面的某个地方】

<a href="#hello">这里是甲，去乙位置</a>
<a name="hello">我是乙位置</a>


<a href="hello.html#world">去其他页面</a>
<a name="world">111我是其他页面的内容</a>

块元素

会独占一行

<h1></h1>

<div>

<p>

内联元素

不会独占一行【内容结束不会换行】

<em></em>

<span></span>

三、列表

什么是列表

        将一系列的内容按照某个规则排列出来的内容

无序列表

<ul>
    <li>内容</li>
</ul>

列表是一个块元素，前面默认的是圆点，一般情况下在网站的导航栏或网站底部使用

有序列表

<ol>
    <li>内容</li>
</ol>

列表是一个块元素，前面默认的是数字，一般在新闻热点，考试的试卷题目

自定义列表

        自己定义列表的种类和内容

        <dl>//表示告诉浏览器这是我自定义的列表
            <dt></dt>//告诉它我自定义的种类
            <dd></dd>//列表的具体内容
        </dl>

四、表格

tr表示一行

一个td表示一列

		<table border="1" cellpadding="0" cellspacing="0">
			<tr>
				<td>11</td>
				<td>12</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
			
		</table>

border：边框

cellpadding:表示单元格内容与单元格边界之间的距离

cellspacing:表示各单元格之间的空隙

rowspan:跨行

colspan:跨列

五、表单

定义

应用

action:提交到的路径

method:提交的方式

        get:提交的内容会显示在地址栏，不安全，长度有限

        post：提交的内容会在报文中，相对安全，长度相对没限制

type:输入值的类型

        text：文本

        password：密码        placeholder：提示信息

        email：邮箱

        number：数字

        radio：单选框

        checkbox：复选框

        textarea：文本框

        select：下拉框

        file：文件

        reset：重置

        submit：提交按钮

        

<!-- action：跳转到的路径
			表单提交方式
					get 输入的值都会在地址栏被获取 最大长度255个字符  相对来说不安全
					post  输入的值不会出现在地址栏  相对安全   输入的值不限
			email：会帮我们检查邮箱格式是否正确 
			step：步长
		-->
		<form action="#" method="post"><!--get:表示提交的方式-->
			编号：<input type="hidden" name="id" /><br />
			name：<input type="text" name="myName" value="张三" readonly/><br />
			密码：<input type="password" name="pwd" placeholder="输入6位密码"/><br />	
			邮箱：<input type="email" name="email" /><br />
			tel：<input type="number" name="num" max="11" min="1" size="11" step="2"/><br />
			性别：<!--<input type="radio" name="sex" />男
			     <input type="radio" name="sex" />女-->
			     
			     <label for="male">男</label>
			     <input type="radio" name="sex" id="male" />
			     <label for="female">女</label>
			     <input type="radio" name="sex" id="female" /><br />
			爱好：<input type="checkbox"  name="hobby"/>lq
			<input type="checkbox"  name="hobby"/>ymq 
			<input type="checkbox"  name="hobby"/>ppq<br />
			<!--文本域-->
			建议：<textarea maxlength="10" ></textarea><br />
			地址：<select>
                    <option>--请选择--</option>
                    <option>--江苏省--</option>
                    <option>--安徽省--</option>
                    <option>--河北省--</option>
				</select>
			
			
			
			<input type="reset"  value="重置"/>
			<input type="submit" disabled value="提交"/>
			
		</form>