HTML和CSS

淡水鳗鱼的咸鱼梦
334 阅读4分钟

第一部分、HTML

一、HTML解释

HTML是Hyper Text Markup Language的缩写，意思是『超文本标记语言』

HTML是一种标记语言，它包含很多标签，标签是通过一组尖括号+标签名的方式来定义的：

<p>HTML is a very popular fore-end technology.</p>

一般的标签包含开始标签和结束标签，还有一些标签是单标签，有的时候标签里还带有属性：

<a href="http://www.xxx.com">show detail</a>

href="www.xxx.com"就是属性，href是属性名，"http://www.xxx.co…

二、HTML标签结构

所有结构可以看这张图：

./images

三、基础标签介绍

1. 标题标签

只有<h1>到<h6>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

</body>
</html>

2. 段落标签

<p>这是一个段落</p>

align="left/right/center"表示对齐方式

3. 超链接标签

<a href="page02-anchor-target.html">点我跳转到下一个页面</a>

href可以指定跳转的页面

target属性设置哪个目标进行跳转：

  • _self : 表示当前页面（默认值）
  • _blank : 表示打开新页面来进行跳转

相对路径和绝对路径

不管是Windows系统还是Linux系统环境下，目录结构都是树形结构，编写路径的规则是一样的

相对路径都是以当前位置为基准来编写的，绝对路径要求必须是以正斜线开头。这个开头的正斜线在整个服务器访问地址中对应的位置如下图所示：

image-20230903223936624

这里标注出的这个位置代表的是服务器根目录，从这里开始我们就是在服务器的内部查找一个具体的Web应用。

所以我们编写绝对路径时就从这个位置开始，按照目录结构找到目标文件即可。拿前面相对路径中的例子来说，我们想在a.html页面中通过超链接访问z.html。此时路径从正斜线开始，和a.html自身所在位置没有任何关系

4. 换行标签

hello <br/>world

5. 无序列表(unordered list)

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

序号类型有：disc（默认值,实心圆点）、circle（空心圆环）、square（空心正方形）

6. 有序列表(ordered list)

<ol type="i" start="2">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ol>

序号类型：1（阿拉伯数字）、A（大写字母）、a（小写字母）、I（大写罗马字母）、i（小写罗马字母）

7. 图片标签

<img decoding="async" src="/images/logo.png" width="258" height="39" alt="Big image"/>

src指定图片位置，width指定图片宽度，height表示图片高度，alt表示图片说明

8. 块标签

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>

<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

div是前后有换行的块，span是前后没有换行的块

9. 横线、字体加粗、字体倾斜标签

<hr/>
<b> 或<strong>
<i>

hr标签可以添加size，width，color等属性

10. 上下标字标签

<sub></sub>
<sup></sup>

11. 表格标签

<table align="center" border="1"  cellspacing="0" cellpadding="10">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>住址</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>22</td>
        <td>18524112625</td>
        <td>河北省廊坊市</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>52</td>
        <td>17621152822</td>
        <td>四川省成都市</td>
    </tr>
</table>

有几行由tr标签表示，每行有几列由td标签表示，表头用th表示，border表示边界，align表示是否居中， cellspacing表示表格间距， cellpadding表示表格距离字体间距

image-20230829210035287

rowspan可以将列合并，colspan可以将行合并，如下：

<table align="center" border="1" cellspacing="0" cellpadding="10">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>住址</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td rowspan="2">22</td>
        <td>18524112625</td>
        <td>河北省廊坊市</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张三</td>
        <td>18524112625</td>
        <td>河北省廊坊市</td>
    </tr>
    <tr>
        <td colspan="5">3</td>
    </tr>
</table>

12. 表单标签

<form action="html_response.html" method="post">
    用户注册信息<br/>
    用户名称: <input type="text" name="username"><br/>
    用户密码: <input type="password" name="pwd1"><br/>
    确认密码: <input type="password" name="pwd2"><br/>
    选择你喜欢的运动项目:
    <input type="checkbox" name="sport" value="lq">篮球<br/>
    <input type="checkbox" name="sport" value="zq" checked>足球<br/>
    <input type="checkbox" name="sport" value="sq" checked>手球<br/>
    请选择性别 :
    <input type="radio" name="gender" value="male">男<br/>
    <input type="radio" name="gender" value="female">女<br/>
    请选择城市:
    <select name="city">
    	<option>--选择--</option>
   		<option value="cd">成都</option>
        <option value="bj">北京</option>
		<option value="sh">上海</option>
	</select><br/>
    自我介绍:
    <textarea rows="6" cols="20"></textarea><br/>
    选择你的文件(头像)<input type="file" name="myfile"><br/>
    <input type="submit" value="提交"/> <input type="reset" value="重置"/>
</form>

get：请求不安全、有长度限制；post：请求数据包含在http请求中

13. frameset标签

frame标签已经被淘汰了，不用了解

<frameset rows="20%,*">
    <frame src="frames/up.html"/>
    <frameset cols="30%,*">
        <frame src="frames/left.html"/>
        <frameset rows="80%,*">
            <frame src="frames/right.html"/>
            <frame src="frames/down.html"/>
        </frameset>
    </frameset>
</frameset>

14. iframe标签

<iframe src="frames/up.html" width="100%"></iframe>
<iframe src="frames/left.html" width="20%"></iframe>

四、符号介绍

./images

第二部分、CSS

一、案例

CSS语法：

选择器{
	样式声明;
    样式声明;
	样式声明;
}

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: black;
			}
		</style>
	</head>
	<body>
		<p>这是段落1</p>
		<p>这是段落2</p>
	</body> 
</html>

二、CSS样式添加方式

  • 直接在style中添加CSS样式
<p style=" color: red">这是段落1</p>
  • 在head中，使用style标签定义CSS样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#txt{
				width: 300px;
				height: 200px;
				color: brown;
				background-color: cornsilk;
			}
		</style>
	</head>
	<body>
		<div id="txt">div1</div><br/>
		<div id="txt">div2</div><br/>
		<div id="txt">div3</div><br/>
	</body>
</html>
  • 直接写在文件里，html引用该文件
<link rel="stylesheet" href="test.css"/>

三、选择器类型

  • id选择器：用#表示，#id{xxx;xxx}
  • class选择器：用.表示，.class{xx,xx}
  • 元素选择器：什么都不加，element{xxxx,xxxx}

优先级：行内样式 > ID 选择器 > class 选择器 > 元素选择器

当然还可以使用组合选择器：

  • 选择器1,选择器2,选择器n{ 属性1:值1; 属性值2:值2}
avatar
文章
阅读
粉丝