欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

web第一讲:html与css

程序员文章站 2022-06-28 12:56:15
本次归纳html与css是什么以及初步了解并使用它们...

web系列

  1. 第一讲:html与css

web第一讲:html与css

目录

一、html

1.什么是html?

2.常用标签(参考自w3cschool)

3.特殊字符(见w3cschool参考手册)

二、css

1.什么是css

2.css如何与html进行结合

 3.css选择器种类

4.常用样式


一、html

1.什么是html?

超文本传输协议(Hyper Text Markup Language)简称html。

HTML主要通过标签来标记需要显示在网页中的各个部分。

网页文件本身是一种文本文件,通过在文本文件中添加标记符,来告诉浏览器如何显示内容(如文字的处理、页面的布局、图片的显示等等)。

2.常用标签(参考自w3cschool)

① 字体标签<font>

font标签一般用来修改文本的字体、颜色、大小。

  • face:修改文本字体。
  • color:修改文本颜色。
  • border:修改文本大小。

示例:

<font face="宋体" color="red" size="7">我是字体标签</font>

② 标题标签<h1>--<h6>

h1-h6由大到小显示标题的大小,可通过设置align属性的值来设置对齐

  • align=“left”:向左对齐。
  • align=“right”:向右对齐。
  • align=“center”:居中对齐。

③ 列表标签<ul> / <ol>

ul表示无序列表标签,ol表示有序列表标签。

<li>表示列表项标签。

示例:

<ul type="none"> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> </ul>

④ 图片标签<img>

img标签可以在html页面上显示图片。

  • src:设置图片的路径。
  • width:设置宽度。
  • height:设置高度。
  • border:设置边框大小
  • alt:当图片找不到时用来代替显示的文本内容

示例:

<img src="1.jpg" width="200" height="260" border="1" alt="图片找不到了"/>

⑤ 超链接<a>

在网页中点击后可以跳转的内容就是超链接。

  • href:设置跳转的地址。
  • target:设置通过何种方式进行跳转。
    • _self:当前页面。
    • _blank:打开新页面。

示例:

<a href="http://www.baidu.com" target="_self">在当前页面跳转到百度</a>

⑥ 内嵌窗口标签<iframe>

iframe标签可以在一个html页面上内嵌一个窗口,去加载单独的页面。

  • src:单独页面的路径。
  • width:窗口宽度。
  • height:窗口高度。

一般情况下与<a>搭配使用,可将点击超链接后跳转的页面加载到iframe内嵌的窗口中。

  1. 在iframe标签中使用name属性定义一个名称。
  2. 设置<a>标签的target属性的值为iframe的name属性值。

注:iframe必须为双标签,否则后面的内容失效。 

示例:

<iframe src="3.html" width="500" height="400" name="abc"></iframe> <br/> 
<ul>
    <li><a href="0.html" target="abc">0.html</a></li> 
    <li><a href="1.html" target="abc">1.html</a></li> 
    <li><a href="2.html" target="abc">2.html</a></li>
</ul>

⑦ 表格标签<table>

可在html页面中显示表格。

table:表格标签。

  • border:设置表格每个单元格的边框大小。
  • width:设置表格宽度。
  • height:设置表格高度。
  • align:设置表格的对齐方式。
  • cellspacing:设置单元格间距。

th:表头标签,默认加粗且居中。

tr:行标签。

td:单元格标签。

  • colspan:设置跨列。
  • rowspan:设置跨行。

示例: 

<table border="1" width="500" height="150" cellspacing="0">
	<tr>
		<th colspan="3">1.1</th>
		<th>1.4</th>
		<th>1.5</th>
	</tr>
	<tr>
		<td rowspan="2">2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td>2.4</td>
		<td>2.5</td>
	</tr>
	<tr>
		<td>3.2</td>
		<td>3.3</td>
		<td>3.4</td>
		<td>3.5</td>
	</tr>
	<tr>
		<td>4.1</td>
		<td>4.2</td>
		<td>4.3</td>
		<td colspan="2" rowspan="2">4.4</td>
	</tr>
	<tr>
		<td>5.1</td>
		<td>5.2</td>
		<td>5.3</td>
	</tr>
</table>

 ⑧ 表单标签<form>

表单标签用来收集信息,并将收集到的信息的所有元素集合发送给服务器。

form标签中常用到的子标签:

  1. 文本输入框:<input type="text">  value属性默认显示的内容。
  2. 密码输入框:<input type="password">  value属性默认显示的内容。
  3. 单选框:<input type="radio">  value属性默认显示的内容,name属性可将其进行分组、checked属性表示默认选中。
  4. 复选框:<input type="checkbox">  value属性默认显示的内容,checked属性表示默认选中。
  5. 重置按钮:<input type="reset"> value属性修改按钮文本。
  6. 提交按钮:<input type="submit"> value属性修改按钮文本。
  7. 按钮:<input type="button"> value属性修改按钮文本。
  8. 文件上传域:<input type="file">。
  9. 隐藏域:<input type="hidden"> 。
  10. 下拉列表:<select>[<option></option>...]</select>   <option>中selected属性默认选中。
  11. 多行文本输入框:<textarea> row表示显示几行,col表示每行显示几个字符。

属性:

  • action:设置提交表单到哪个服务器地址。
  • mothod:设置以何种方式提交,GET(默认)或POST。

 GET请求的特点是:

  1. 浏览器地址栏中的地址是:action属性[+?+请求参数],请求参数的格式是:name=value&name=value&....
  2. 需要上传的数据显示在地址栏中,不安全。
  3. 有一定的数据长度限制。

POST请求的特点:

  1. 浏览器地址栏中只有action属性值。
  2. 相对于GET请求来说更加安全。
  3. 没有数据长度限制。

提交表单时,数据没有发送个服务器的原因:

  1. 表单项没有设置name属性值。
  2. 单选、复选框都需要添加value属性。

一般情况下与表格标签搭配使用,优化(格式化)表单页面。

示例:

<form action="http://localhost:8080" method="get">
    <input type="hidden" value="login" name="action">
    <h2 align="center">用户注册</h2>
    <table align="center">
        <tr>
            <td width="50">用户名称:</td>
            <td><input type="text" name="username" value="请输入您的名字"/></td>
        </tr>
        <tr>
            <td>输入密码:</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</td>
            <td>
                <input value="boy" type="radio" name="sex" checked>男
                <input value="girl" type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td><input name="hub" value="java" type="checkbox"/>java
                <input name="hub" value="drink" type="checkbox"/>喝酒
                <input name="hub" value="smoke" type="checkbox"/>抽烟<br/>
                <input name="hub" value="tangtou" type="checkbox"/>烫头
                <input name="hub" value="wenshen" type="checkbox" checked="checked"/>文身
            </td>
        </tr>
        <tr>
            <td>国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍:</td>
            <td>
                <select name="guoji">
                    <option value="none">--请选择国籍--</option>
                    <option selected value="zh">中国</option>
                    <option value="jp">日本</option>
                    <option value="xl">叙利亚</option>
                    <option value="cx">朝鲜</option>
                    <option value="am">美国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea name="ziwopj" rows="5"></textarea><br/></td>
        </tr>
        <tr>
            <td></td>
            <td align="right">
                <input type="reset" value="重置" align="center"/>
                <input type="submit" value="提交" align="right"/>
            </td>
        </tr>
    </table>
</form>

⑨ 其他标签 

<span>:所占用的长度就是封装的数据长度

<p>:在段落上下方各空出一行来,若已有空行则不再空。

<div>:默认独占一行

3.特殊字符(见w3cschool参考手册)

二、css

1.什么是css

css是[层叠样式表单]。是用于(增强)控制网页样式并允许样式信息与网页内容分离的一种标记性语言。

2.css如何与html进行结合

①设置标签的style属性,修改标签样式

只能在单个标签中使用。

示例:

<div style="border: 2px solid red;">我是div</div>

②在html的head标签中使用style标签来定义css样式

只能在单个html中使用。

示例:

<style type="text/css">
	div{
		font-size: 30px;
		color: blue;
		border: 1px solid yellow;
	}
</style>

③将css样式写成单独的css文件中,在通过link标签引入使用

通过link引入css样式的所有html中都能使用。

引入示例:

<link rel="stylesheet" type="text/css" href="1.css">

 3.css选择器种类

①标签名选择器(可作用于标签名相同标签):

标签名{

       属性:值;

}

②id选择器(可作用于id属性值相同的标签)

需将要修改样式的标签中定义id属性。

#id值{

      属性:值;

}

③class选择器(可作用于class属性值相同的标签)

需将要修改样式的标签中定义class属性。

.class值{

    属性:值;

}

④组合选择器

可让多个选择器共用同一个css样式代码

选择器1,选择器2,选择器3{

        属性:值;

}

注:多个属性声明需使用分号隔开,最后一条也尽量使用分号。且一般来说一行只声明一个属性

4.常用样式

字体颜色:color;

字体大小:font-size;

背景:background-color;

宽度:width;

高度:height;

边框:border;

文本居中:text-align:center;

标签居中:margin-left:auto;margin-right:auto;

超链接去掉下划线:text-decoration:none;

列表去除修饰:ul{list-style:none;}

表格细线:

table{border:; border-collapse:collapse;}

td,th{border:;}

本文地址:https://blog.csdn.net/connly/article/details/109203076